LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

odysee

Browse source 
Naomi

comment websockets

increase slow mode time to 5 seconds

fix to prevent duplicate comments

update livestream details

fix channel

pin electron boom

fix rebase

prune unused icons

updating meme

updating meme

update livestream for naomi

fix rebase

DigitalCashNetwork

remove electroboom pin

Slavguns

Joel

So he can edit his claims

add streamTypes param to claimTilesDiscover so following section can search for all types of content

fix typo
This commit is contained in:
Sean Yesmunt 2021-03-03 14:23:42 -05:00 committed by zeppi
parent 6761212ce7
commit ad19495702
112 changed files with 2816 additions and 940 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
flow-typed/homepage.js vendored
View file

@ -4,12 +4,12 @@ declare type HomepageObject = {
options: any,
route: string,
title: string,
}
};
declare type HomepageData = {
[string]: HomepageObject,
default: any => any,
}
};
declare type RowDataItem = {
title: any,
@ -19,6 +19,7 @@ declare type RowDataItem = {
extra?: any,
options?: {
channelIds?: Array<string>,
limitClaimsPerChannel?: number,
pageSize: number,
},
route?: string,

1442
homepages/homepage.js
View file

File diff suppressed because it is too large Load diff

2
static/app-strings.json
View file

@ -858,7 +858,6 @@
"Tag selection": "Tag selection",
"Select some tags to help us show you interesting things.": "Select some tags to help us show you interesting things.",
"You are currently following %followingCount% tags": "You are currently following %followingCount% tags",
"You are currently following %followingCount% tag": "You are currently following %followingCount% tag",
"Back": "Back",
"Experimental Transcoding": "Experimental Transcoding",
"A Folder containing FFmpeg": "A Folder containing FFmpeg",
@ -1414,6 +1413,7 @@
"Never fear though, there are tons of ways to earn %lbc%. You can earn or purchase %lbc%, or you can have your friends send you some.": "Never fear though, there are tons of ways to earn %lbc%. You can earn or purchase %lbc%, or you can have your friends send you some.",
"gaming, comedy, educational": "gaming, comedy, educational",
"A channel is required to comment on %SITE_NAME%": "A channel is required to comment on %SITE_NAME%",
"A channel is required to comment on lbry.tv": "A channel is required to comment on lbry.tv",
"A welcome bonus and thank you for your contribution to content freedom.": "A welcome bonus and thank you for your contribution to content freedom.",
"You earned %lbc% new user reward.": "You earned %lbc% LBC new user reward.",
"Just press play on something. Anything at all. Yep, even that one. Everybody's doing it.": "Just press play on something. Anything at all. Yep, even that one. Everybody's doing it.",

BIN
static/img/favicon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/img/lbry-favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

40
ui/analytics.js
View file

@ -26,10 +26,10 @@ if (isProduction) {
// @endif
type Analytics = {
error: string => Promise<any>,
error: (string) => Promise<any>,
sentryError: ({} | string, {}) => Promise<any>,
pageView: (string, ?string) => void,
setUser: Object => void,
setUser: (Object) => void,
toggleInternal: (boolean, ?boolean) => void,
apiLogView: (string, string, string, ?number, ?() => void) => Promise<any>,
apiLogPublish: (ChannelClaim | StreamClaim) => void,
@ -39,6 +39,9 @@ type Analytics = {
playerStartedEvent: (?boolean) => void,
videoFetchDuration: (string, number) => void,
videoStartEvent: (string, number) => void,
adsFetchedEvent: () => void,
adsReceivedEvent: (any) => void,
adsErrorEvent: (any) => void,
videoBufferEvent: (
StreamClaim,
{
@ -55,9 +58,9 @@ type Analytics = {
emailVerifiedEvent: () => void,
rewardEligibleEvent: () => void,
startupEvent: () => void,
purchaseEvent: number => void,
readyEvent: number => void,
openUrlEvent: string => void,
purchaseEvent: (number) => void,
readyEvent: (number) => void,
openUrlEvent: (string) => void,
};
type LogPublishParams = {
@ -75,8 +78,8 @@ if (window.localStorage.getItem(SHARE_INTERNAL) === 'true') internalAnalyticsEna
// @endif
const analytics: Analytics = {
error: message => {
return new Promise(resolve => {
error: (message) => {
return new Promise((resolve) => {
if (internalAnalyticsEnabled && isProduction) {
return Lbryio.call('event', 'desktop_error', { error_message: message }).then(() => {
resolve(true);
@ -87,9 +90,9 @@ const analytics: Analytics = {
});
},
sentryError: (error, errorInfo) => {
return new Promise(resolve => {
return new Promise((resolve) => {
if (internalAnalyticsEnabled && isProduction) {
Sentry.withScope(scope => {
Sentry.withScope((scope) => {
scope.setExtras(errorInfo);
const eventId = Sentry.captureException(error);
resolve(eventId);
@ -114,7 +117,7 @@ const analytics: Analytics = {
MatomoInstance.trackPageView(params);
}
},
setUser: userId => {
setUser: (userId) => {
if (internalAnalyticsEnabled && userId) {
window._paq.push(['setUserId', String(userId)]);
// @if TARGET='app'
@ -188,7 +191,7 @@ const analytics: Analytics = {
}
},
apiSyncTags: params => {
apiSyncTags: (params) => {
if (internalAnalyticsEnabled && isProduction) {
Lbryio.call('content_tags', 'sync', params);
}
@ -238,12 +241,21 @@ const analytics: Analytics = {
});
}
},
playerLoadedEvent: embedded => {
playerLoadedEvent: (embedded) => {
sendMatomoEvent('Player', 'Loaded', embedded ? 'embedded' : 'onsite');
},
playerStartedEvent: embedded => {
playerStartedEvent: (embedded) => {
sendMatomoEvent('Player', 'Started', embedded ? 'embedded' : 'onsite');
},
adsFetchedEvent: () => {
sendMatomoEvent('Media', 'AdsFetched');
},
adsReceivedEvent: (response) => {
sendMatomoEvent('Media', 'AdsReceived', JSON.stringify(response));
},
adsErrorEvent: (response) => {
sendMatomoEvent('Media', 'AdsError', JSON.stringify(response));
},
tagFollowEvent: (tag, following) => {
sendMatomoEvent('Tag', following ? 'Tag-Follow' : 'Tag-Unfollow', tag);
},
@ -316,7 +328,7 @@ analytics.pageView(
// Listen for url changes and report
// This will include search queries
history.listen(location => {
history.listen((location) => {
const { pathname, search } = location;
const page = `${pathname}${search}`;

4
ui/component/app/view.jsx
View file

@ -399,12 +399,12 @@ function App(props: Props) {
{/* @if TARGET='web' */}
<YoutubeWelcome />
{!shouldHideNag && <OpenInAppLink uri={uri} />}
{false && !shouldHideNag && <OpenInAppLink uri={uri} />}
{!shouldHideNag && <NagContinueFirstRun />}
{(lbryTvApiStatus === STATUS_DEGRADED || lbryTvApiStatus === STATUS_FAILING) && !shouldHideNag && (
<NagDegradedPerformance onClose={() => setLbryTvApiStatus(STATUS_OK)} />
)}
{lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && (
{false && lbryTvApiStatus === STATUS_OK && showAnalyticsNag && !shouldHideNag && (
<NagDataCollection onClose={handleAnalyticsDismiss} />
)}
{/* @endif */}

6
ui/component/channelContent/view.jsx
View file

@ -1,5 +1,6 @@
// @flow
import { SHOW_ADS } from 'config';
import { LIVE_STREAM_CHANNEL_CLAIM_ID } from 'constants/livestream';
import * as CS from 'constants/claim_search';
import * as ICONS from 'constants/icons';
import React, { Fragment } from 'react';
@ -13,6 +14,7 @@ import LivestreamLink from 'component/livestreamLink';
import { Form, FormField } from 'component/common/form';
import { DEBOUNCE_WAIT_DURATION_MS } from 'constants/search';
import { lighthouse } from 'redux/actions/search';
import LivestreamLink from 'component/livestreamLink';
type Props = {
uri: string,
@ -103,6 +105,8 @@ function ChannelContent(props: Props) {
return (
<Fragment>
{claimId === LIVE_STREAM_CHANNEL_CLAIM_ID && <LivestreamLink />}
{!fetching && Boolean(claimsInChannel) && !channelIsBlocked && !channelIsBlackListed && (
<HiddenNsfwClaims uri={uri} />
)}
@ -132,10 +136,12 @@ function ChannelContent(props: Props) {
{claim && claimsInChannel > 0 ? (
<ClaimListDiscover
hideLivestreamClaims
showHiddenByUser={viewHiddenChannels}
forceShowReposts
tileLayout={tileLayout}
uris={searchResults}
streamType={CS.CONTENT_ALL}
channelIds={[claim.claim_id]}
feeAmount={CS.FEE_AMOUNT_ANY}
defaultOrderBy={CS.ORDER_BY_NEW}

BIN
ui/component/channelThumbnail/spaceman.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.1 KiB

6
ui/component/channelThumbnail/view.jsx
View file

@ -2,7 +2,7 @@
import React from 'react';
import { parseURI } from 'lbry-redux';
import classnames from 'classnames';
import Gerbil from './gerbil.png';
import Spaceman from './spaceman.png';
import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
import ChannelStakedIndicator from 'component/channelStakedIndicator';
@ -79,7 +79,7 @@ function ChannelThumbnail(props: Props) {
<img
alt={__('Channel profile picture')}
className="channel-thumbnail__default"
src={!thumbError && thumbnailPreview ? thumbnailPreview : Gerbil}
src={!thumbError && thumbnailPreview ? thumbnailPreview : Spaceman}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
/>
)}
@ -91,7 +91,7 @@ function ChannelThumbnail(props: Props) {
<img
alt={__('Channel profile picture')}
className="channel-thumbnail__custom"
src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
src={!thumbError ? thumbnailPreview || thumbnail : Spaceman}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
/>
)}

12
ui/component/claimList/view.jsx
View file

@ -38,6 +38,7 @@ type Props = {
renderActions?: (Claim) => ?Node,
searchInLanguage: boolean,
hideMenu?: boolean,
hideLivestreamClaims?: boolean,
};
export default function ClaimList(props: Props) {
@ -63,6 +64,7 @@ export default function ClaimList(props: Props) {
renderActions,
searchInLanguage,
hideMenu,
hideLivestreamClaims,
} = props;
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@ -101,7 +103,14 @@ export default function ClaimList(props: Props) {
return tileLayout && !header ? (
<section className="claim-grid">
{urisLength > 0 &&
uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} showHiddenByUser={showHiddenByUser} />)}
uris.map((uri) => (
<ClaimPreviewTile
key={uri}
uri={uri}
showHiddenByUser={showHiddenByUser}
hideLivestreamClaims={hideLivestreamClaims}
/>
))}
{!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
{timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
</section>
@ -157,6 +166,7 @@ export default function ClaimList(props: Props) {
renderActions={renderActions}
showUserBlocked={showHiddenByUser}
showHiddenByUser={showHiddenByUser}
hideLivestreamClaims={hideLivestreamClaims}
customShouldHide={(claim: StreamClaim) => {
// Hack to hide spee.ch thumbnail publishes
// If it meets these requirements, it was probably uploaded here:

51
ui/component/claimListDiscover/view.jsx
View file

@ -23,7 +23,7 @@ type Props = {
personalView: boolean,
doToggleTagFollowDesktop: (string) => void,
meta?: Node,
showNsfw: boolean,
// showNsfw: boolean,
hideReposts: boolean,
history: { action: string, push: (string) => void, replace: (string) => void },
location: { search: string, pathname: string },
@ -66,6 +66,9 @@ type Props = {
searchInLanguage: boolean,
scrollAnchor?: string,
showHiddenByUser?: boolean,
limitClaimsPerChannel?: number,
releaseTime?: string,
hideLivestreamClaims?: boolean,
};
function ClaimListDiscover(props: Props) {
@ -78,7 +81,7 @@ function ClaimListDiscover(props: Props) {
loading,
meta,
channelIds,
showNsfw,
// showNsfw,
hideReposts,
history,
location,
@ -93,8 +96,8 @@ function ClaimListDiscover(props: Props) {
claimType,
pageSize,
defaultClaimType,
streamType,
defaultStreamType,
streamType = CS.FILE_VIDEO,
defaultStreamType = CS.FILE_VIDEO,
freshness,
defaultFreshness = CS.FRESH_WEEK,
renderProperties,
@ -113,8 +116,11 @@ function ClaimListDiscover(props: Props) {
forceShowReposts = false,
languageSetting,
searchInLanguage,
limitClaimsPerChannel,
releaseTime,
scrollAnchor,
showHiddenByUser = false,
hideLivestreamClaims,
} = props;
const didNavigateForward = history.action === 'PUSH';
const { search } = location;
@ -153,12 +159,12 @@ function ClaimListDiscover(props: Props) {
const durationParam = urlParams.get(CS.DURATION_KEY) || null;
const channelIdsInUrl = urlParams.get(CS.CHANNEL_IDS_KEY);
const channelIdsParam = channelIdsInUrl ? channelIdsInUrl.split(',') : channelIds;
const feeAmountParam = urlParams.get('fee_amount') || feeAmount;
const feeAmountParam = urlParams.get('fee_amount') || feeAmount || CS.FEE_AMOUNT_ONLY_FREE;
const originalPageSize = pageSize || CS.PAGE_SIZE;
const dynamicPageSize = isLargeScreen ? Math.ceil(originalPageSize * (3 / 2)) : originalPageSize;
const historyAction = history.action;
let orderParam = orderBy || urlParams.get(CS.ORDER_BY_KEY) || defaultOrderBy;
let orderParam = orderBy || urlParams.get(CS.ORDER_BY_KEY) || defaultOrderBy || orderParamEntry;
if (!orderParam) {
if (historyAction === 'POP') {
@ -202,6 +208,7 @@ function ClaimListDiscover(props: Props) {
fee_amount?: string,
has_source?: boolean,
has_no_source?: boolean,
limit_claims_per_channel?: number,
} = {
page_size: dynamicPageSize,
page,
@ -213,7 +220,7 @@ function ClaimListDiscover(props: Props) {
not_channel_ids:
// If channelIdsParam were passed in, we don't need not_channel_ids
!channelIdsParam ? mutedAndBlockedChannelIds : [],
not_tags: !showNsfw ? MATURE_TAGS : [],
not_tags: MATURE_TAGS,
order_by:
orderParam === CS.ORDER_BY_TRENDING
? CS.ORDER_BY_TRENDING_VALUE
@ -226,6 +233,10 @@ function ClaimListDiscover(props: Props) {
options.has_source = true;
}
if (limitClaimsPerChannel) {
options.limit_claims_per_channel = limitClaimsPerChannel;
}
if (feeAmountParam && claimType !== CS.CLAIM_CHANNEL) {
options.fee_amount = feeAmountParam;
}
@ -255,7 +266,9 @@ function ClaimListDiscover(props: Props) {
options.reposted_claim_id = repostedClaimId;
}
if (claimType !== CS.CLAIM_CHANNEL) {
if (releaseTime) {
options.release_time = releaseTime;
} else if (claimType !== CS.CLAIM_CHANNEL) {
if (orderParam === CS.ORDER_BY_TOP && freshnessParam !== CS.FRESH_ALL) {
options.release_time = `>${Math.floor(moment().subtract(1, freshnessParam).startOf('hour').unix())}`;
} else if (orderParam === CS.ORDER_BY_NEW || orderParam === CS.ORDER_BY_TRENDING) {
@ -333,9 +346,25 @@ function ClaimListDiscover(props: Props) {
const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
const claimSearchResult = claimSearchByQuery[claimSearchCacheQuery];
let claimSearchResult = claimSearchByQuery[claimSearchCacheQuery];
const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[claimSearchCacheQuery];
// uncomment to fix an item on a page
// const fixUri = 'lbry://@corbettreport#0/lbryodysee#5';
// if (
// orderParam === CS.ORDER_BY_NEW &&
// claimSearchResult &&
// claimSearchResult.length > 2 &&
// window.location.pathname === '/$/rabbithole'
// ) {
// if (claimSearchResult.indexOf(fixUri) !== -1) {
// claimSearchResult.splice(claimSearchResult.indexOf(fixUri), 1);
// } else {
// claimSearchResult.pop();
// }
// claimSearchResult.splice(2, 0, fixUri);
// }
const [prevOptions, setPrevOptions] = React.useState(null);
if (!isJustScrollingToNewPage(prevOptions, options)) {
@ -455,7 +484,7 @@ function ClaimListDiscover(props: Props) {
claimType={claimType}
streamType={streamType}
defaultStreamType={defaultStreamType}
feeAmount={feeAmount}
// feeAmount={feeAmount}
orderBy={orderBy}
defaultOrderBy={defaultOrderBy}
hideAdvancedFilter={hideAdvancedFilter}
@ -492,6 +521,7 @@ function ClaimListDiscover(props: Props) {
includeSupportAction={includeSupportAction}
injectedItem={injectedItem}
showHiddenByUser={showHiddenByUser}
hideLivestreamClaims={hideLivestreamClaims}
/>
{loading && (
<div className="claim-grid">
@ -520,6 +550,7 @@ function ClaimListDiscover(props: Props) {
includeSupportAction={includeSupportAction}
injectedItem={injectedItem}
showHiddenByUser={showHiddenByUser}
hideLivestreamClaims={hideLivestreamClaims}
/>
{loading && new Array(dynamicPageSize).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
</div>

20
ui/component/claimPreview/view.jsx
View file

@ -1,4 +1,5 @@
// @flow
import { LIVE_STREAM_TAG, LIVE_STREAM_CHANNEL_CLAIM_ID } from 'constants/livestream';
import type { Node } from 'react';
import React, { useEffect, forwardRef } from 'react';
import { NavLink, withRouter } from 'react-router-dom';
@ -68,6 +69,8 @@ type Props = {
hideRepostLabel?: boolean,
repostUrl?: string,
hideMenu?: boolean,
livestream?: boolean,
hideLivestreamClaims?: boolean,
};
const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@ -117,6 +120,8 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
renderActions,
hideMenu = false,
// repostUrl,
livestream,
hideLivestreamClaims,
} = props;
const WrapperElement = wrapperElement || 'li';
const shouldFetch =
@ -124,6 +129,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
const abandoned = !isResolvingUri && !claim;
const shouldHideActions = hideActions || type === 'small' || type === 'tooltip';
const canonicalUrl = claim && claim.canonical_url;
const isLivestream =
claim &&
claim.signing_channel &&
claim.signing_channel.claim_id === LIVE_STREAM_CHANNEL_CLAIM_ID &&
claim.value.tags &&
claim.value.tags.includes(LIVE_STREAM_TAG);
let isValid = false;
if (uri) {
try {
@ -190,6 +202,10 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
onClick(e);
}
if (livestream) {
return;
}
if (claim && !pending) {
history.push(navigateUrl);
}
@ -201,7 +217,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
}
}, [isValid, uri, isResolvingUri, shouldFetch, resolveUri]);
if (shouldHide && !showNullPlaceholder) {
if ((shouldHide && !showNullPlaceholder) || (isLivestream && hideLivestreamClaims)) {
return null;
}
@ -274,7 +290,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
</div>
)}
{/* @endif */}
{!isRepost && !isChannelUri && (
{!isRepost && !isChannelUri && !livestream && (
<div className="claim-preview__file-property-overlay">
<FileProperties uri={contentUri} small />
</div>

11
ui/component/claimPreviewTile/view.jsx
View file

@ -1,4 +1,5 @@
// @flow
import { LIVE_STREAM_TAG, LIVE_STREAM_CHANNEL_CLAIM_ID } from 'constants/livestream';
import React from 'react';
import classnames from 'classnames';
import { NavLink, withRouter } from 'react-router-dom';
@ -40,6 +41,7 @@ type Props = {
isMature: boolean,
showMature: boolean,
showHiddenByUser?: boolean,
hideLivestreamClaims?: boolean,
};
function ClaimPreviewTile(props: Props) {
@ -60,12 +62,19 @@ function ClaimPreviewTile(props: Props) {
isMature,
showMature,
showHiddenByUser,
hideLivestreamClaims,
} = props;
const isRepost = claim && claim.repost_channel_url;
const shouldFetch = claim === undefined;
const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
const canonicalUrl = claim && claim.canonical_url;
const navigateUrl = formatLbryUrlForWeb(canonicalUrl || uri || '/');
const isLivestream =
claim &&
claim.signing_channel &&
claim.signing_channel.claim_id === LIVE_STREAM_CHANNEL_CLAIM_ID &&
claim.value.tags &&
claim.value.tags.includes(LIVE_STREAM_TAG);
const navLinkProps = {
to: navigateUrl,
@ -137,7 +146,7 @@ function ClaimPreviewTile(props: Props) {
shouldHide = blockedChannelUris.some((blockedUri) => blockedUri === claim.permanent_url);
}
if (shouldHide) {
if (shouldHide || (isLivestream && hideLivestreamClaims)) {
return null;
}

23
ui/component/claimTilesDiscover/view.jsx
View file

@ -1,12 +1,12 @@
// @flow
import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
import * as CS from 'constants/claim_search';
import React from 'react';
import { createNormalizedClaimSearchKey, MATURE_TAGS } from 'lbry-redux';
import ClaimPreviewTile from 'component/claimPreviewTile';
import { useHistory } from 'react-router';
type Props = {
prefixUris?: Array<string>,
uris: Array<string>,
doClaimSearch: ({}) => void,
showNsfw: boolean,
@ -32,6 +32,7 @@ type Props = {
timestamp?: string,
feeAmount?: string,
limitClaimsPerChannel?: number,
streamTypes?: Array<string>,
};
function ClaimTilesDiscover(props: Props) {
@ -49,16 +50,18 @@ function ClaimTilesDiscover(props: Props) {
releaseTime,
languages,
claimType,
prefixUris,
timestamp,
feeAmount,
limitClaimsPerChannel,
fetchingClaimSearchByQuery,
streamTypes,
// pin,
} = props;
const { location } = useHistory();
const urlParams = new URLSearchParams(location.search);
const feeAmountInUrl = urlParams.get('fee_amount');
const feeAmountParam = feeAmountInUrl || feeAmount;
const feeAmountParam = feeAmountInUrl || feeAmount || CS.FEE_AMOUNT_ONLY_FREE;
const options: {
page_size: number,
no_totals: boolean,
@ -89,6 +92,7 @@ function ClaimTilesDiscover(props: Props) {
channel_ids: channelIds || [],
not_channel_ids: [],
order_by: orderBy || ['trending_group', 'trending_mixed'],
stream_types: streamTypes || [CS.FILE_VIDEO],
};
if (!ENABLE_NO_SOURCE_CLAIMS) {
@ -129,12 +133,23 @@ function ClaimTilesDiscover(props: Props) {
}
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
const uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []);
const uris = claimSearchByQuery[claimSearchCacheQuery] || [];
// Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
const optionsStringForEffect = JSON.stringify(options);
const isLoading = fetchingClaimSearchByQuery[claimSearchCacheQuery];
const shouldPerformSearch = !isLoading && uris.length === 0;
// const fixUri = 'lbry://@ElectroBOOM#9/remove-your-mustache#9';
// if (pin && uris && uris.length > 2 && window.location.pathname === '/') {
// if (uris.indexOf(fixUri) !== -1) {
// uris.splice(uris.indexOf(fixUri), 1);
// } else {
// uris.pop();
// }
// uris.splice(2, 0, fixUri);
// }
React.useEffect(() => {
if (shouldPerformSearch) {
const searchOptions = JSON.parse(optionsStringForEffect);

48
ui/component/commentCreate/view.jsx
View file

@ -7,7 +7,7 @@ import { FormField, Form } from 'component/common/form';
import Button from 'component/button';
import SelectChannel from 'component/selectChannel';
import usePersistedState from 'effects/use-persisted-state';
import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field';
import { FF_MAX_CHARS_IN_COMMENT, FF_MAX_CHARS_IN_LIVESTREAM_COMMENT } from 'constants/form-field';
import { useHistory } from 'react-router';
import type { ElementRef } from 'react';
import emoji from 'emoji-dictionary';
@ -33,9 +33,12 @@ type Props = {
parentId: string,
isReply: boolean,
isPostingComment: boolean,
activeChannel: string,
activeChannelClaim: ?ChannelClaim,
livestream?: boolean,
bottom: boolean,
onSubmit: (string, string) => void,
livestream: boolean,
authenticated: boolean,
embed?: boolean,
toast: (string) => void,
claimIsMine: boolean,
};
@ -53,12 +56,19 @@ export function CommentCreate(props: Props) {
parentId,
isPostingComment,
activeChannelClaim,
onSubmit,
bottom,
livestream,
authenticated,
embed,
toast,
claimIsMine,
} = props;
const buttonref: ElementRef<any> = React.useRef();
const { push } = useHistory();
const {
push,
location: { pathname },
} = useHistory();
const { claim_id: claimId } = claim;
const [commentValue, setCommentValue] = React.useState('');
const [lastCommentTime, setLastCommentTime] = React.useState();
@ -80,7 +90,7 @@ export function CommentCreate(props: Props) {
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
const KEYCODE_ENTER = 13;
if ((e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
e.preventDefault();
buttonref.current.click();
}
@ -112,6 +122,10 @@ export function CommentCreate(props: Props) {
setCommentValue('');
setLastCommentTime(Date.now());
if (onSubmit) {
onSubmit(commentValue, activeChannelClaim.name);
}
if (onDoneReplying) {
onDoneReplying();
}
@ -126,9 +140,18 @@ export function CommentCreate(props: Props) {
useEffect(() => setCharCount(commentValue.length), [commentValue]);
if (!hasChannels) {
if (!authenticated || !hasChannels) {
return (
<div role="button" onClick={() => push(`/$/${PAGES.CHANNEL_NEW}`)}>
<div
role="button"
onClick={() =>
embed
? window.open(`https://odysee.com/$/${PAGES.AUTH}?redirect=/$/${PAGES.LIVESTREAM}`)
: authenticated
? push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`)
: push(`/$/${PAGES.AUTH}?redirect=${pathname}`)
}
>
<FormField
type="textarea"
name={'comment_signup_prompt'}
@ -136,7 +159,7 @@ export function CommentCreate(props: Props) {
label={isFetchingChannels ? __('Comment') : undefined}
/>
<div className="section__actions">
<Button disabled button="primary" label={__('Post --[button to submit something]--')} requiresAuth={IS_WEB} />
<Button disabled button="primary" label={__('Post --[button to submit something]--')} />
</div>
</div>
);
@ -148,6 +171,7 @@ export function CommentCreate(props: Props) {
className={classnames('comment__create', {
'comment__create--reply': isReply,
'comment__create--nested-reply': isNested,
'comment__create--bottom': bottom,
})}
>
<FormField
@ -171,7 +195,7 @@ export function CommentCreate(props: Props) {
charCount={charCount}
onChange={handleCommentChange}
autoFocus={isReply}
textAreaMaxLength={FF_MAX_CHARS_IN_COMMENT}
textAreaMaxLength={livestream ? FF_MAX_CHARS_IN_LIVESTREAM_COMMENT : FF_MAX_CHARS_IN_COMMENT}
/>
{livestream && hasChannels && (
<div className="livestream__emoji-actions">
@ -190,7 +214,11 @@ export function CommentCreate(props: Props) {
))}
</div>
)}
<div className="section__actions section__actions--no-margin">
<div
className={classnames('section__actions', {
'section__actions--no-margin': !livestream,
})}
>
<Button
ref={buttonref}
button="primary"

4
ui/component/commentReactions/view.jsx
View file

@ -77,7 +77,7 @@ export default function CommentReactions(props: Props) {
<Button
requiresAuth={IS_WEB}
title={__('Upvote')}
icon={ICONS.UPVOTE}
icon={myReacts.includes(REACTION_TYPES.LIKE) ? ICONS.FIRE_ACTIVE : ICONS.FIRE}
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.LIKE),
})}
@ -87,7 +87,7 @@ export default function CommentReactions(props: Props) {
<Button
requiresAuth={IS_WEB}
title={__('Downvote')}
icon={ICONS.DOWNVOTE}
icon={myReacts.includes(REACTION_TYPES.DISLIKE) ? ICONS.SLIME_ACTIVE : ICONS.SLIME}
className={classnames('comment__action', {
'comment__action--active': myReacts && myReacts.includes(REACTION_TYPES.DISLIKE),
})}

11
ui/component/common/card.jsx
View file

@ -20,6 +20,7 @@ type Props = {
defaultExpand?: boolean,
nag?: Node,
smallTitle?: boolean,
onClick?: () => void,
};
export default function Card(props: Props) {
@ -37,12 +38,20 @@ export default function Card(props: Props) {
smallTitle = false,
defaultExpand,
nag,
onClick,
} = props;
const [expanded, setExpanded] = useState(defaultExpand);
const expandable = defaultExpand !== undefined;
return (
<section className={classnames(className, 'card')}>
<section
className={classnames(className, 'card')}
onClick={() => {
if (onClick) {
onClick();
}
}}
>
{(title || subtitle) && (
<div
className={classnames('card__header--between', {

32
ui/component/fileActions/view.jsx
View file

@ -25,6 +25,8 @@ type Props = {
myChannels: ?Array<ChannelClaim>,
doToast: ({ message: string }) => void,
clearPlayingUri: () => void,
hideRepost?: boolean,
livestream?: boolean,
};
function FileActions(props: Props) {
@ -40,6 +42,8 @@ function FileActions(props: Props) {
myChannels,
clearPlayingUri,
doToast,
hideRepost,
livestream,
} = props;
const {
push,
@ -80,23 +84,25 @@ function FileActions(props: Props) {
const lhsSection = (
<>
{ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />}
{ENABLE_FILE_REACTIONS && <FileReactions uri={uri} livestream={livestream} />}
<ClaimSupportButton uri={uri} fileAction />
<Button
button="alt"
className="button--file-action"
icon={ICONS.REPOST}
label={
claim.meta.reposted > 1 ? __(`%repost_total% Reposts`, { repost_total: claim.meta.reposted }) : __('Repost')
}
description={__('Repost')}
requiresAuth={IS_WEB}
onClick={handleRepostClick}
/>
{!hideRepost && (
<Button
button="alt"
className="button--file-action"
icon={ICONS.REPOST}
label={
claim.meta.reposted > 1 ? __(`%repost_total% Reposts`, { repost_total: claim.meta.reposted }) : __('Repost')
}
description={__('Repost')}
requiresAuth={IS_WEB}
onClick={handleRepostClick}
/>
)}
<Button
className="button--file-action"
icon={ICONS.SHARE}
label={__('Share')}
label={isMobile ? undefined : __('Share')}
title={__('Share')}
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
/>

2
ui/component/fileDescription/view.jsx
View file

@ -50,7 +50,7 @@ function FileDescription(props: Props) {
<FileDetails uri={uri} />
</div>
<div className="section__actions--between">
<div className="card__bottom-actions">
{expanded ? (
<Button button="link" label={__('Less')} onClick={() => setExpanded(!expanded)} />
) : (

77
ui/component/fileReactions/view.jsx
View file

@ -1,4 +1,5 @@
// @flow
import * as REACTION_TYPES from 'constants/reactions';
import * as ICONS from 'constants/icons';
import React from 'react';
import classnames from 'classnames';
@ -8,25 +9,51 @@ import NudgeFloating from 'component/nudgeFloating';
type Props = {
claim: StreamClaim,
doFetchReactions: string => void,
doReactionLike: string => void,
doReactionDislike: string => void,
doFetchReactions: (string) => void,
doReactionLike: (string) => void,
doReactionDislike: (string) => void,
uri: string,
likeCount: number,
dislikeCount: number,
myReaction: ?string,
livestream?: boolean,
};
function FileReactions(props: Props) {
const { claim, uri, doFetchReactions, doReactionLike, doReactionDislike, likeCount, dislikeCount } = props;
const {
claim,
uri,
doFetchReactions,
doReactionLike,
doReactionDislike,
myReaction,
likeCount,
dislikeCount,
livestream,
} = props;
const claimId = claim && claim.claim_id;
const channel = claim && claim.signing_channel && claim.signing_channel.name;
React.useEffect(() => {
if (claimId) {
function fetchReactions() {
doFetchReactions(claimId);
}
}, [claimId, doFetchReactions]);
let fetchInterval;
if (claimId) {
fetchReactions();
if (livestream) {
fetchInterval = setInterval(fetchReactions, 10000);
}
}
return () => {
if (fetchInterval) {
clearInterval(fetchInterval);
}
};
}, [claimId, doFetchReactions, livestream]);
return (
<>
@ -41,20 +68,46 @@ function FileReactions(props: Props) {
title={__('I like this')}
requiresAuth={IS_WEB}
authSrc="filereaction_like"
className={classnames('button--file-action')}
label={formatNumberWithCommas(likeCount, 0)}
className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
label={
<>
{myReaction === REACTION_TYPES.LIKE && (
<>
<div className="button__fire-glow" />
<div className="button__fire-particle1" />
<div className="button__fire-particle2" />
<div className="button__fire-particle3" />
<div className="button__fire-particle4" />
<div className="button__fire-particle5" />
<div className="button__fire-particle6" />
</>
)}
{formatNumberWithCommas(likeCount, 0)}
</>
}
iconSize={18}
icon={ICONS.UPVOTE}
icon={myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE}
onClick={() => doReactionLike(uri)}
/>
<Button
requiresAuth={IS_WEB}
authSrc={'filereaction_dislike'}
title={__('I dislike this')}
className={classnames('button--file-action')}
label={formatNumberWithCommas(dislikeCount, 0)}
className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
label={
<>
{myReaction === REACTION_TYPES.DISLIKE && (
<>
<div className="button__slime-stain" />
<div className="button__slime-drop1" />
<div className="button__slime-drop2" />
</>
)}
{formatNumberWithCommas(dislikeCount, 0)}
</>
}
iconSize={18}
icon={ICONS.DOWNVOTE}
icon={myReaction === REACTION_TYPES.DISLIKE ? ICONS.SLIME_ACTIVE : ICONS.SLIME}
onClick={() => doReactionDislike(uri)}
/>
</>

4
ui/component/fileSubtitle/view.jsx
View file

@ -23,8 +23,8 @@ function FileSubtitle(props: Props) {
<FileViewCount uri={uri} />
)}
</div>
<FileActions uri={uri} />
{ /* did I need these params? */ }
<FileActions uri={uri} hideRepost={livestream} livestream={livestream} />
</div>
);
}

6
ui/component/fileViewCount/view.jsx
View file

@ -1,10 +1,11 @@
// @flow
import { SIMPLE_SITE } from 'config';
import React, { useEffect } from 'react';
import HelpLink from 'component/common/help-link';
type Props = {
claim: ?StreamClaim,
fetchViewCount: string => void,
fetchViewCount: (string) => void,
uri: string,
viewCount: string,
};
@ -12,7 +13,6 @@ type Props = {
function FileViewCount(props: Props) {
const { claim, uri, fetchViewCount, viewCount } = props;
const claimId = claim && claim.claim_id;
useEffect(() => {
if (claimId) {
fetchViewCount(claimId);
@ -24,7 +24,7 @@ function FileViewCount(props: Props) {
return (
<span className="media__subtitle--centered">
{viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view')}
<HelpLink href="https://lbry.com/faq/views" />
{!SIMPLE_SITE && <HelpLink href="https://lbry.com/faq/views" />}
</span>
);
}

8
ui/component/fileViewerEmbeddedTitle/view.jsx
View file

@ -5,7 +5,8 @@ import FilePrice from 'component/filePrice';
import { formatLbryUrlForWeb } from 'util/url';
import { withRouter } from 'react-router';
import { URL } from 'config';
import * as ICONS from 'constants/icons';
import OdyseeLogo from 'component/header/odysee_logo.png';
import OdyseeLogoWithText from 'component/header/odysee_white.png';
type Props = {
uri: string,
@ -36,7 +37,10 @@ function FileViewerEmbeddedTitle(props: Props) {
{...contentLinkProps}
/>
<div className="file-viewer__embedded-info">
<Button className="file-viewer__overlay-logo" icon={ICONS.LBRY} aria-label={__('Home')} {...lbryLinkProps} />
<Button className="file-viewer__overlay-logo" aria-label={__('Home')} {...lbryLinkProps}>
<img src={OdyseeLogo} className=" mobile-only" />
<img src={OdyseeLogoWithText} className=" mobile-hidden" />
</Button>
{isInApp && <FilePrice uri={uri} />}
</div>
</div>

30
ui/component/header/view.jsx
View file

@ -19,6 +19,8 @@ import ChannelThumbnail from 'component/channelThumbnail';
import { remote } from 'electron';
import { IS_MAC } from 'component/app/view';
// @endif
import OdyseeLogoWithWhiteText from './odysee_white.png';
import OdyseeLogoWithText from './odysee.png';
type Props = {
user: ?User,
@ -86,8 +88,8 @@ const Header = (props: Props) => {
sidebarOpen,
setSidebarOpen,
isAbsoluteSideNavHidden,
user,
hideCancel,
user,
activeChannelClaim,
} = props;
const isMobile = useIsMobile();
@ -98,7 +100,7 @@ const Header = (props: Props) => {
const isPwdResetPage = history.location.pathname.includes(PAGES.AUTH_PASSWORD_RESET);
const hasBackout = Boolean(backout);
const { backLabel, backNavDefault, title: backTitle, simpleTitle: simpleBackTitle } = backout || {};
const notificationsEnabled = (user && user.experimental_ui) || false;
// const notificationsEnabled = (user && user.experimental_ui) || false; // fix this
const livestreamEnabled = (ENABLE_NO_SOURCE_CLAIMS && user && user.experimental_ui) || false;
const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
@ -233,19 +235,12 @@ const Header = (props: Props) => {
icon={ICONS.MENU}
onClick={() => setSidebarOpen(!sidebarOpen)}
>
{isAbsoluteSideNavHidden && isMobile && notificationsEnabled && <NotificationBubble />}
{isAbsoluteSideNavHidden && isMobile && <NotificationBubble />}
</Button>
</span>
)}
<Button
className="header__navigation-item header__navigation-item--lbry"
// @if TARGET='app'
label={'LBRY'}
// @endif
// @if TARGET='web'
label={LOGO_TITLE} // eslint-disable-line
// @endif
icon={ICONS.LBRY}
className="header__navigation-item header__navigation-item--lbry header__navigation-item--button-mobile"
onClick={() => {
if (history.location.pathname === '/') window.location.reload();
}}
@ -255,7 +250,12 @@ const Header = (props: Props) => {
}}
// @endif
{...homeButtonNavigationProps}
/>
>
<img
src={currentTheme === 'light' ? OdyseeLogoWithText : OdyseeLogoWithWhiteText}
className="header__odysee"
/>
</Button>
{!authHeader && (
<div className="header__center">
@ -272,7 +272,7 @@ const Header = (props: Props) => {
<HeaderMenuButtons
authenticated={authenticated}
notificationsEnabled={notificationsEnabled}
notificationsEnabled
history={history}
handleThemeToggle={handleThemeToggle}
currentTheme={currentTheme}
@ -425,6 +425,10 @@ function HeaderMenuButtons(props: HeaderMenuButtonProps) {
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('New Channel')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.YOUTUBE_SYNC}`)}>
<Icon aria-hidden icon={ICONS.YOUTUBE} />
{__('Sync YouTube Channel')}
</MenuItem>
{livestreamEnabled && (
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.LIVESTREAM}`)}>

9
ui/component/livestreamFeed/index.js Normal file
View file

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

38
ui/component/livestreamFeed/view.jsx Normal file
View file

@ -0,0 +1,38 @@
// @flow
import { BITWAVE_USERNAME, 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,
activeViewers: number,
};
export default function LivestreamFeed(props: Props) {
const { claim, uri, activeViewers } = props;
if (!claim) {
return null;
}
return (
<>
<div className="section card-stack">
<div className="file-render file-render--video livestream">
<div className="file-viewer">
<iframe
src={`${BITWAVE_EMBED_URL}/${BITWAVE_USERNAME}?skin=odysee&autoplay=1`}
scrolling="no"
allowFullScreen
/>
</div>
</div>
<FileTitleSection uri={uri} livestream activeViewers={activeViewers} />
</div>
<LivestreamComments uri={uri} />
</>
);
}

6
ui/component/notificationBubble/view.jsx
View file

@ -5,14 +5,12 @@ import classnames from 'classnames';
type Props = {
unseenCount: number,
inline: boolean,
user: ?User,
};
export default function NotificationHeaderButton(props: Props) {
const { unseenCount, inline = false, user } = props;
const notificationsEnabled = user && user.experimental_ui;
const { unseenCount, inline = false } = props;
if (unseenCount === 0 || !notificationsEnabled) {
if (unseenCount === 0) {
return null;
}

7
ui/component/notificationHeaderButton/view.jsx
View file

@ -19,9 +19,8 @@ export default function NotificationHeaderButton(props: Props) {
// notifications,
// fetching,
doSeeAllNotifications,
user,
// user,
} = props;
const notificationsEnabled = user && user.experimental_ui;
const { push } = useHistory();
function handleMenuClick() {
@ -32,10 +31,6 @@ export default function NotificationHeaderButton(props: Props) {
push(`/$/${PAGES.NOTIFICATIONS}`);
}
if (!notificationsEnabled) {
return null;
}
return (
<Button
onClick={handleMenuClick}

14
ui/component/page/view.jsx
View file

@ -1,5 +1,6 @@
// @flow
import type { Node } from 'react';
import * as PAGES from 'constants/pages';
import React, { Fragment } from 'react';
import classnames from 'classnames';
import SideNavigation from 'component/sideNavigation';
@ -21,7 +22,6 @@ type Props = {
isUpgradeAvailable: boolean,
authPage: boolean,
filePage: boolean,
homePage: boolean,
noHeader: boolean,
noFooter: boolean,
noSideNavigation: boolean,
@ -56,16 +56,20 @@ function Page(props: Props) {
const {
location: { pathname },
} = useHistory();
const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', true);
const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', false);
const isMediumScreen = useIsMediumScreen();
const isMobile = useIsMobile();
let isOnFilePage = false;
try {
const url = pathname.slice(1).replace(/:/g, '#');
const { isChannel } = parseURI(url);
if (!isChannel) {
if (pathname.includes(`/$/${PAGES.LIVESTREAM}`)) {
isOnFilePage = true;
} else {
const url = pathname.slice(1).replace(/:/g, '#');
const { isChannel } = parseURI(url);
if (!isChannel) {
isOnFilePage = true;
}
}
} catch (e) {}

8
ui/component/publishAdditionalOptions/view.jsx
View file

@ -8,6 +8,7 @@ import LicenseType from './license-type';
import Card from 'component/common/card';
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import PublishName from 'component/publishName';
// @if TARGET='app'
// import ErrorText from 'component/common/error-text';
// import { LbryFirst } from 'lbry-redux';
@ -115,6 +116,7 @@ function PublishAdditionalOptions(props: Props) {
<React.Fragment>
{!hideSection && (
<div className={classnames({ 'card--disabled': !name })}>
<PublishName />
{/* @if TARGET='app' */}
{/* {showLbryFirstCheckbox && (
<div className="section">
@ -156,7 +158,7 @@ function PublishAdditionalOptions(props: Props) {
type="select"
name="content_language"
value={language}
onChange={event => updatePublishForm({ language: event.target.value })}
onChange={(event) => updatePublishForm({ language: event.target.value })}
>
{Object.entries(SUPPORTED_LANGUAGES).map(([langkey, langName]) => (
// $FlowFixMe
@ -176,12 +178,12 @@ function PublishAdditionalOptions(props: Props) {
licenseUrl: newLicenseUrl,
})
}
handleLicenseDescriptionChange={event =>
handleLicenseDescriptionChange={(event) =>
updatePublishForm({
otherLicenseDescription: event.target.value,
})
}
handleLicenseUrlChange={event => updatePublishForm({ licenseUrl: event.target.value })}
handleLicenseUrlChange={(event) => updatePublishForm({ licenseUrl: event.target.value })}
/>
</div>
</div>

13
ui/component/publishFile/view.jsx
View file

@ -334,7 +334,7 @@ function PublishFile(props: Props) {
className={disabled || balance === 0 ? 'card--disabled' : ''}
title={
<div>
{header}
{__('Upload') || header}
{publishing && <Spinner type={'small'} />}
{inProgress && (
<div>
@ -346,7 +346,8 @@ function PublishFile(props: Props) {
subtitle={isStillEditing && __('You are currently editing your upload.')}
actions={
<React.Fragment>
<PublishName />
<PublishName uri={uri} />
<FormField
type="text"
name="content_title"
@ -358,12 +359,16 @@ function PublishFile(props: Props) {
/>
{isPublishFile && (
<FileSelector
label={__('File')}
label={__('Video file')}
disabled={disabled}
currentPath={currentFile}
onFileChosen={handleFileChange}
// https://stackoverflow.com/questions/19107685/safari-input-type-file-accept-video-ignores-mp4-files
accept="video/mp4,video/x-m4v,video/*"
placeholder={__('Select video file to upload')}
/>
)}
{isPublishFile && getMessage()}
{isPublishPost && (
<PostEditor
@ -375,7 +380,7 @@ function PublishFile(props: Props) {
setCurrentFileType={setCurrentFileType}
/>
)}
{isPublishFile && getMessage()}
{/* @if TARGET='app' */}
{isPublishFile && (
<FormField

12
ui/component/publishForm/index.js
View file

@ -12,6 +12,7 @@ import {
doPrepareEdit,
doCheckPublishNameAvailability,
SETTINGS,
selectMyChannelClaims,
} from 'lbry-redux';
import { doPublishDesktop } from 'redux/actions/publish';
import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
@ -20,7 +21,7 @@ import { makeSelectClientSetting } from 'redux/selectors/settings';
import PublishPage from './view';
import { selectUser } from '../../redux/selectors/user';
const select = state => ({
const select = (state) => ({
...selectPublishFormValues(state),
user: selectUser(state),
// The winning claim for a short lbry uri
@ -35,17 +36,18 @@ const select = state => ({
modal: selectModal(state),
enablePublishPreview: makeSelectClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW)(state),
activeChannelClaim: selectActiveChannelClaim(state),
myChannels: selectMyChannelClaims(state),
incognito: selectIncognito(state),
});
const perform = dispatch => ({
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
const perform = (dispatch) => ({
updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),
clearPublish: () => dispatch(doClearPublish()),
resolveUri: uri => dispatch(doResolveUri(uri)),
resolveUri: (uri) => dispatch(doResolveUri(uri)),
publish: (filePath, preview) => dispatch(doPublishDesktop(filePath, preview)),
prepareEdit: (claim, uri) => dispatch(doPrepareEdit(claim, uri)),
resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()),
checkAvailability: name => dispatch(doCheckPublishNameAvailability(name)),
checkAvailability: (name) => dispatch(doCheckPublishNameAvailability(name)),
});
export default connect(select, perform)(PublishPage);

1
ui/component/publishName/name-help-text.jsx
View file

@ -13,7 +13,6 @@ type Props = {
function NameHelpText(props: Props) {
const { uri, myClaimForUri, onEditMyClaim, isStillEditing } = props;
let nameHelpText;
if (isStillEditing) {

9
ui/component/recommendedContent/view.jsx
View file

@ -1,4 +1,5 @@
// @flow
import { SEARCH_OPTIONS } from 'constants/search';
import { SHOW_ADS, SIMPLE_SITE } from 'config';
import React from 'react';
import ClaimList from 'component/claimList';
@ -32,7 +33,13 @@ export default function RecommendedContent(props: Props) {
if (stringifiedClaim) {
const jsonClaim = JSON.parse(stringifiedClaim);
if (jsonClaim && jsonClaim.value && jsonClaim.claim_id) {
const options: Options = { size: 20, related_to: jsonClaim.claim_id, isBackgroundSearch: true };
const options: Options = {
size: 20,
related_to: jsonClaim.claim_id,
isBackgroundSearch: true,
[SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_FILES,
[SEARCH_OPTIONS.MEDIA_VIDEO]: true,
};
if (jsonClaim && !mature) {
options['nsfw'] = false;
}

24
ui/component/repostCreate/view.jsx
View file

@ -20,20 +20,20 @@ import Spinner from 'component/spinner';
type Props = {
doToast: ({ message: string }) => void,
doClearRepostError: () => void,
doRepost: StreamRepostOptions => Promise<*>,
doRepost: (StreamRepostOptions) => Promise<*>,
title: string,
claim?: StreamClaim,
enteredContentClaim?: StreamClaim,
balance: number,
channels: ?Array<ChannelClaim>,
doCheckPublishNameAvailability: string => Promise<*>,
doCheckPublishNameAvailability: (string) => Promise<*>,
error: ?string,
reposting: boolean,
uri: string,
name: string,
contentUri: string,
setRepostUri: string => void,
setContentUri: string => void,
setRepostUri: (string) => void,
setContentUri: (string) => void,
doCheckPendingClaims: () => void,
redirectUri?: string,
passedRepostAmount: number,
@ -88,7 +88,7 @@ function RepostCreate(props: Props) {
const repostUrlName = `lbry://${!activeChannelClaim ? '' : `${activeChannelClaim.name}/`}`;
const contentFirstRender = React.useRef(true);
const setAutoRepostBid = amount => {
const setAutoRepostBid = (amount) => {
if (balance && balance > 0.02) {
if (uri) {
setRepostBid(0.01);
@ -113,7 +113,7 @@ function RepostCreate(props: Props) {
const isLbryUrl = value.startsWith('lbry://') && value !== 'lbry://';
const error = '';
const addLbryIfNot = term => {
const addLbryIfNot = (term) => {
return term.startsWith('lbry://') ? term : `lbry://${term}`;
};
if (wasCopiedFromWeb) {
@ -178,7 +178,7 @@ function RepostCreate(props: Props) {
React.useEffect(() => {
if (enteredRepostName && isNameValid(enteredRepostName, false)) {
doCheckPublishNameAvailability(enteredRepostName).then(r => setAvailable(r));
doCheckPublishNameAvailability(enteredRepostName).then((r) => setAvailable(r));
}
}, [enteredRepostName, doCheckPublishNameAvailability]);
@ -316,7 +316,7 @@ function RepostCreate(props: Props) {
<div>
{uri && (
<fieldset-section>
<ClaimPreview key={uri} uri={uri} actions={''} type={'inline'} showNullPlaceholder />
<ClaimPreview key={uri} uri={uri} actions={''} showNullPlaceholder />
</fieldset-section>
)}
{!uri && name && (
@ -327,7 +327,7 @@ function RepostCreate(props: Props) {
name="content_url"
value={enteredContent}
error={contentError}
onChange={event => setEnteredContentUri(event.target.value)}
onChange={(event) => setEnteredContentUri(event.target.value)}
placeholder={__('Enter a name or %domain% URL', { domain: SITE_URL })}
/>
</>
@ -359,7 +359,7 @@ function RepostCreate(props: Props) {
type="text"
name="repost_name"
value={enteredRepostName}
onChange={event => setEnteredRepostName(event.target.value)}
onChange={(event) => setEnteredRepostName(event.target.value)}
placeholder={__('MyFunName')}
/>
</fieldset-group>
@ -384,8 +384,8 @@ function RepostCreate(props: Props) {
</>
}
disabled={!enteredRepostName || resolvingRepost}
onChange={event => setRepostBid(event.target.value)}
onWheel={e => e.stopPropagation()}
onChange={(event) => setRepostBid(event.target.value)}
onWheel={(e) => e.stopPropagation()}
/>
</React.Fragment>

5
ui/component/router/view.jsx
View file

@ -49,6 +49,7 @@ import BuyPage from 'page/buy';
import NotificationsPage from 'page/notifications';
import SignInWalletPasswordPage from 'page/signInWalletPassword';
import YoutubeSyncPage from 'page/youtubeSync';
import LiveStreamPage from 'page/livestream';
import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
import { parseURI, isURIValid } from 'lbry-redux';
@ -216,6 +217,7 @@ function AppRouter(props: Props) {
<Route path={`/`} exact component={HomePage} />
<Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
<Route path={`/$/${PAGES.WILD_WEST}`} exact component={DiscoverPage} />
{/* $FlowFixMe */}
{dynamicRoutes.map((dynamicRouteProps: RowDataItem) => (
<Route
@ -283,6 +285,9 @@ function AppRouter(props: Props) {
<Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
<Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
<Route path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamPage} />
{/* Below need to go at the end to make sure we don't match any of our pages first */}
<Route path="/:claimName" exact component={ShowPage} />
<Route path="/:claimName/:streamName" exact component={ShowPage} />

91
ui/component/searchOptions/view.jsx
View file

@ -33,33 +33,34 @@ const SearchOptions = (props: Props) => {
/>
{expanded && (
<Form className="search__options">
<fieldset>
<legend className="search__legend">{__('Search For')}</legend>
{[
{
option: SEARCH_OPTIONS.INCLUDE_FILES,
label: __('Files'),
},
{
option: SEARCH_OPTIONS.INCLUDE_CHANNELS,
label: __('Channels'),
},
{
option: SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
label: __('Everything'),
},
].map(({ option, label }) => (
<FormField
key={option}
name={option}
type="radio"
blockWrap={false}
label={label}
checked={options[SEARCH_OPTIONS.CLAIM_TYPE] === option}
onChange={() => setSearchOption(SEARCH_OPTIONS.CLAIM_TYPE, option)}
/>
))}
</fieldset>
{false && (
<fieldset>
{[
{
option: SEARCH_OPTIONS.INCLUDE_FILES,
label: __('Files'),
},
{
option: SEARCH_OPTIONS.INCLUDE_CHANNELS,
label: __('Channels'),
},
{
option: SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
label: __('Everything'),
},
].map(({ option, label }) => (
<FormField
key={option}
name={option}
type="radio"
blockWrap={false}
label={label}
checked={options[SEARCH_OPTIONS.CLAIM_TYPE] === option}
onChange={() => setSearchOption(SEARCH_OPTIONS.CLAIM_TYPE, option)}
/>
))}
</fieldset>
)}
<fieldset disabled={isFilteringByChannel}>
<legend className="search__legend">{__('Type')}</legend>
@ -70,7 +71,7 @@ const SearchOptions = (props: Props) => {
},
{
option: SEARCH_OPTIONS.MEDIA_AUDIO,
label: __('Audio'),
label: __('Music'),
},
{
option: SEARCH_OPTIONS.MEDIA_IMAGE,
@ -98,22 +99,24 @@ const SearchOptions = (props: Props) => {
))}
</fieldset>
<fieldset>
<legend className="search__legend">{__('Other Options')}</legend>
<FormField
type="select"
name="result-count"
value={resultCount}
onChange={(e) => setSearchOption(SEARCH_OPTIONS.RESULT_COUNT, e.target.value)}
blockWrap={false}
label={__('Returned Results')}
>
<option value={10}>10</option>
<option value={30}>30</option>
<option value={50}>50</option>
<option value={100}>100</option>
</FormField>
</fieldset>
{false && (
<fieldset>
<legend className="search__legend">{__('Other Options')}</legend>
<FormField
type="select"
name="result-count"
value={resultCount}
onChange={(e) => setSearchOption(SEARCH_OPTIONS.RESULT_COUNT, e.target.value)}
blockWrap={false}
label={__('Returned Results')}
>
<option value={10}>10</option>
<option value={30}>30</option>
<option value={50}>50</option>
<option value={100}>100</option>
</FormField>
</fieldset>
)}
</Form>
)}
</div>

6
ui/component/selectThumbnail/view.jsx
View file

@ -99,7 +99,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
style={{ display: 'none' }}
src={thumbnailSrc}
alt={__('Thumbnail Preview')}
onError={e => {
onError={(e) => {
this.setState({
thumbnailError: true,
});
@ -131,9 +131,9 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
<FileSelector
currentPath={thumbnailPath}
label={__('Thumbnail')}
placeholder={__('Choose a thumbnail')}
placeholder={__('Thumbnails that entice a viewer to watch a video work best')}
accept={accept}
onFileChosen={file => openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, { file })}
onFileChosen={(file) => openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, { file })}
/>
)}
{status === THUMBNAIL_STATUSES.COMPLETE && thumbnail && (

14
ui/component/sideNavigation/view.jsx
View file

@ -51,6 +51,7 @@ type Props = {
type SideNavLink = {
title: string,
link?: string,
route?: string,
onClick?: () => any,
icon: string,
extra?: Node,
@ -60,7 +61,6 @@ type SideNavLink = {
function SideNavigation(props: Props) {
const {
subscriptions,
followedTags,
doSignOut,
email,
purchaseSuccess,
@ -72,6 +72,7 @@ function SideNavigation(props: Props) {
unseenCount,
homepageData,
user,
followedTags,
} = props;
const { EXTRA_SIDEBAR_LINKS } = homepageData;
@ -211,7 +212,7 @@ function SideNavigation(props: Props) {
});
}
const notificationsEnabled = user && user.experimental_ui;
const notificationsEnabled = SIMPLE_SITE || (user && user.experimental_ui);
const isAuthenticated = Boolean(email);
// SIDE LINKS: FOLLOWING, HOME, [FULL,] [EXTRA]
let SIDE_LINKS: Array<SideNavLink> = [];
@ -291,8 +292,13 @@ function SideNavigation(props: Props) {
<li className="navigation-link">
<Button label={__('FAQ')} href="https://odysee.com/@OdyseeHelp:b" />
</li>
<li className="navigation-link">
<Button label={__('Support')} href="https://lbry.com/support" />
<Button label={__('Community Guidelines')} href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c" />
</li>
<li className="navigation-link">
<Button label={__('Support --[used in footer; general help/support]--')} href="https://lbry.com/support" />
</li>
<li className="navigation-link">
<Button label={__('Terms')} href="https://lbry.com/termsofservice" />
@ -325,7 +331,7 @@ function SideNavigation(props: Props) {
// $FlowFixMe
const { hideForUnauth, ...passedProps } = linkProps;
return !email && linkProps.hideForUnauth && IS_WEB ? null : (
<li key={linkProps.link}>
<li key={linkProps.route || linkProps.link}>
<Button
{...passedProps}
label={__(linkProps.title)}

2
ui/component/subscribeButton/index.js
View file

@ -7,7 +7,6 @@ import {
} from 'redux/selectors/subscriptions';
import { makeSelectPermanentUrlForUri } from 'lbry-redux';
import { doToast } from 'redux/actions/notifications';
import { selectUser } from 'redux/selectors/user';
import SubscribeButton from './view';
const select = (state, props) => ({
@ -15,7 +14,6 @@ const select = (state, props) => ({
firstRunCompleted: selectFirstRunCompleted(state),
permanentUrl: makeSelectPermanentUrlForUri(props.uri)(state),
notificationsDisabled: makeSelectNotificationsDisabled(props.uri)(state),
user: selectUser(state),
});
export default connect(select, {

11
ui/component/subscribeButton/view.jsx
View file

@ -15,13 +15,12 @@ type SubscriptionArgs = {
type Props = {
permanentUrl: ?string,
isSubscribed: boolean,
doChannelSubscribe: SubscriptionArgs => void,
doChannelUnsubscribe: SubscriptionArgs => void,
doChannelSubscribe: (SubscriptionArgs) => void,
doChannelUnsubscribe: (SubscriptionArgs) => void,
showSnackBarOnSubscribe: boolean,
doToast: ({ message: string }) => void,
shrinkOnMobile: boolean,
notificationsDisabled: boolean,
user: ?User,
};
export default function SubscribeButton(props: Props) {
@ -34,14 +33,12 @@ export default function SubscribeButton(props: Props) {
doToast,
shrinkOnMobile = false,
notificationsDisabled,
user,
} = props;
const buttonRef = useRef();
const isMobile = useIsMobile();
let isHovering = useHover(buttonRef);
isHovering = isMobile ? true : isHovering;
const uiNotificationsEnabled = user && user.experimental_ui;
const { channelName } = parseURI(permanentUrl);
const claimName = '@' + channelName;
@ -66,7 +63,7 @@ export default function SubscribeButton(props: Props) {
requiresAuth={IS_WEB}
label={label}
title={titlePrefix}
onClick={e => {
onClick={(e) => {
e.stopPropagation();
subscriptionHandler({
@ -80,7 +77,7 @@ export default function SubscribeButton(props: Props) {
}
}}
/>
{isSubscribed && uiNotificationsEnabled && (
{isSubscribed && (
<Button
button="alt"
icon={notificationsDisabled ? ICONS.BELL : ICONS.BELL_ON}

4
ui/component/syncPassword/view.jsx
View file

@ -53,7 +53,7 @@ function SyncPassword(props: Props) {
error={passwordError && __('Wrong password for %email%', { email })}
label={__('Password for %email%', { email })}
value={password}
onChange={e => setPassword(e.target.value)}
onChange={(e) => setPassword(e.target.value)}
/>
<FormField
name="remember-password"
@ -75,7 +75,7 @@ function SyncPassword(props: Props) {
<I18nMessage
tokens={{
help: <Button button="link" label={__('help guide')} href="https://lbry.com/faq/account-sync" />,
email: <Button button="link" label={'help@lbry.com'} href="mailto:help@lbry.com" />,
email: <Button button="link" label={'help@odysee.com'} href="mailto:help@odysee.com" />,
}}
>
If you are having issues, checkout our %help% or email us at %email%.

33
ui/component/userChannelFollowIntro/view.jsx
View file

@ -11,24 +11,23 @@ import { AUTO_FOLLOW_CHANNELS, SIMPLE_SITE } from 'config';
type Props = {
subscribedChannels: Array<Subscription>,
onContinue: () => void,
onBack: () => void,
channelSubscribe: (sub: Subscription) => void,
homepageData: any,
};
const channelsToSubscribe = AUTO_FOLLOW_CHANNELS.trim()
.split(' ')
.filter(x => x !== '');
.filter((x) => x !== '');
function UserChannelFollowIntro(props: Props) {
const { subscribedChannels, channelSubscribe, onContinue, onBack, homepageData } = props;
const { subscribedChannels, channelSubscribe, onContinue, homepageData } = props;
const { PRIMARY_CONTENT_CHANNEL_IDS } = homepageData;
const followingCount = (subscribedChannels && subscribedChannels.length) || 0;
// subscribe to lbry
useEffect(() => {
if (channelsToSubscribe && channelsToSubscribe.length) {
channelsToSubscribe.forEach(c =>
channelsToSubscribe.forEach((c) =>
channelSubscribe({
channelName: parseURI(c).claimName,
uri: c,
@ -41,25 +40,25 @@ function UserChannelFollowIntro(props: Props) {
<Card
title={__('Find channels to follow')}
subtitle={__(
'LBRY works better if you find and follow a couple creators you like. You can also block channels you never want to see.'
'Odysee works better if you find and follow a couple creators you like. You can also block channels you never want to see.'
)}
actions={
<React.Fragment>
<div className="section__actions--between">
<Button button="secondary" onClick={onBack} label={__('Back')} />
<Button
button={subscribedChannels.length < 1 ? 'alt' : 'primary'}
onClick={onContinue}
label={subscribedChannels.length < 1 ? __('Skip') : __('Continue')}
/>
</div>
<div className="section__body">
<ClaimListDiscover
defaultOrderBy={CS.ORDER_BY_TOP}
hideFilters
meta={
<Button
button={subscribedChannels.length < 1 ? 'alt' : 'primary'}
onClick={onContinue}
label={subscribedChannels.length < 1 ? __('Skip') : __('Continue')}
/>
}
defaultOrderBy={CS.ORDER_BY_TRENDING}
defaultFreshness={CS.FRESH_ALL}
claimType="channel"
claimIds={SIMPLE_SITE ? undefined : PRIMARY_CONTENT_CHANNEL_IDS}
defaultTags={followingCount > 3 ? CS.TAGS_FOLLOWED : undefined}
claimIds={SIMPLE_SITE ? PRIMARY_CONTENT_CHANNEL_IDS : undefined}
claimType={CS.CLAIM_CHANNEL}
maxPages={3}
/>
{followingCount > 0 && (
<Nag

2
ui/component/userEmailNew/view.jsx
View file

@ -100,7 +100,7 @@ function UserEmailNew(props: Props) {
<Card
title={__('Join %SITE_NAME%', { SITE_NAME })}
// @if TARGET='app'
subtitle={__('An account with lbry.tv allows you to earn rewards and backup your data.')}
subtitle={__('An account with %domain% allows you to earn rewards and backup your data.', { domain: DOMAIN })}
// @endif
actions={
<div className={classnames({ 'card--disabled': DOMAIN === 'lbry.tv' })}>

6
ui/component/userEmailVerify/view.jsx
View file

@ -8,10 +8,10 @@ const THIRTY_SECONDS_IN_MS = 30000;
type Props = {
email: string,
isReturningUser: boolean,
resendVerificationEmail: string => void,
resendVerificationEmail: (string) => void,
resendingEmail: boolean,
checkEmailVerified: () => void,
toast: string => void,
toast: (string) => void,
user: {
has_verified_email: boolean,
},
@ -102,7 +102,7 @@ class UserEmailVerify extends React.PureComponent<Props, State> {
<p className="help--card-actions">
<I18nMessage
tokens={{
help_link: <Button button="link" href="mailto:help@lbry.com" label="help@lbry.com" />,
help_link: <Button button="link" href="mailto:help@odysee.com" label="help@odysee.com" />,
chat_link: <Button button="link" href="https://chat.lbry.com" label={__('chat')} />,
}}
>

6
ui/component/userPhoneVerify/view.jsx
View file

@ -6,7 +6,7 @@ import I18nMessage from 'component/i18nMessage';
import Card from 'component/common/card';
type Props = {
verifyUserPhone: string => void,
verifyUserPhone: (string) => void,
resetPhone: () => void,
phoneErrorMessage: string,
phone: string,
@ -61,7 +61,7 @@ class UserPhoneVerify extends React.PureComponent<Props, State> {
name="code"
placeholder="1234"
value={this.state.code}
onChange={event => {
onChange={(event) => {
this.handleCodeChanged(event);
}}
label={__('Verification Code')}
@ -72,7 +72,7 @@ class UserPhoneVerify extends React.PureComponent<Props, State> {
<p className="help">
<I18nMessage
tokens={{
help_link: <Button button="link" href="mailto:help@lbry.com" label="help@lbry.com" />,
help_link: <Button button="link" href="mailto:help@odysee.com" label="help@odysee.com" />,
chat_link: <Button button="link" href="https://chat.lbry.com" label={__('chat')} />,
}}
>

23
ui/component/userSignUp/view.jsx
View file

@ -1,5 +1,4 @@
// @flow
import * as PAGES from 'constants/pages';
import React from 'react';
import classnames from 'classnames';
import { useHistory } from 'react-router';
@ -7,7 +6,6 @@ import UserEmailNew from 'component/userEmailNew';
import UserEmailVerify from 'component/userEmailVerify';
import UserFirstChannel from 'component/userFirstChannel';
import UserChannelFollowIntro from 'component/userChannelFollowIntro';
import UserTagFollowIntro from 'component/userTagFollowIntro';
import YoutubeSync from 'page/youtubeSync';
import { DEFAULT_BID_FOR_FIRST_CHANNEL } from 'component/userFirstChannel/view';
import { YOUTUBE_STATUSES } from 'lbryinc';
@ -42,7 +40,6 @@ type Props = {
creatingChannel: boolean,
setClientSetting: (string, boolean, ?boolean) => void,
followingAcknowledged: boolean,
tagsAcknowledged: boolean,
rewardsAcknowledged: boolean,
interestedInYoutubeSync: boolean,
doToggleInterestedInYoutubeSync: () => void,
@ -67,7 +64,6 @@ function UserSignUp(props: Props) {
fetchingChannels,
creatingChannel,
followingAcknowledged,
tagsAcknowledged,
rewardsAcknowledged,
setClientSetting,
interestedInYoutubeSync,
@ -118,8 +114,7 @@ function UserSignUp(props: Props) {
interestedInYoutubeSync);
const showYoutubeTransfer = hasVerifiedEmail && hasYoutubeChannels && !isYoutubeTransferComplete;
const showFollowIntro = step === 'channels' || (hasVerifiedEmail && !followingAcknowledged);
const showTagsIntro = step === 'tags' || (hasVerifiedEmail && !tagsAcknowledged);
const canHijackSignInFlowWithSpinner = hasVerifiedEmail && !showFollowIntro && !showTagsIntro && !rewardsAcknowledged;
const canHijackSignInFlowWithSpinner = hasVerifiedEmail && !showFollowIntro && !rewardsAcknowledged;
const isCurrentlyFetchingSomething = fetchingChannels || claimingReward || syncingWallet || creatingChannel;
const isWaitingForSomethingToFinish =
// If the user has claimed the email award, we need to wait until the balance updates sometime in the future
@ -206,22 +201,6 @@ function UserSignUp(props: Props) {
}}
/>
),
showTagsIntro && (
<UserTagFollowIntro
onContinue={() => {
let url = `/$/${PAGES.AUTH}?reset_scroll=1&${STEP_PARAM}=channels`;
if (redirect) {
url += `&${REDIRECT_PARAM}=${redirect}`;
}
if (shouldRedirectImmediately) {
url += `&${REDIRECT_IMMEDIATELY_PARAM}=true`;
}
replace(url);
setSettingAndSync(SETTINGS.TAGS_ACKNOWLEDGED, true);
}}
/>
),
showYoutubeTransfer && (
<div>
<YoutubeTransferStatus /> <Confetti recycle={false} style={{ position: 'fixed' }} />

8
ui/component/userVerify/view.jsx
View file

@ -12,7 +12,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
type Props = {
errorMessage: ?string,
isPending: boolean,
verifyUserIdentity: string => void,
verifyUserIdentity: (string) => void,
verifyPhone: () => void,
fetchUser: () => void,
skipLink?: string,
@ -60,7 +60,7 @@ class UserVerify extends React.PureComponent<Props> {
SITE_NAME,
}}
>
Verified accounts are eligible to earn LBRY Credits for views, watching and reposting content, sharing
Verified accounts are eligible to earn LBRY Credits for views, watching and reposting videos, sharing
invite links etc. Verifying also helps us keep the %SITE_NAME% community safe too! %Refresh% or %Skip%.
</I18nMessage>
</p>
@ -73,9 +73,7 @@ class UserVerify extends React.PureComponent<Props> {
<Card
icon={ICONS.PHONE}
title={__('Verify phone number')}
subtitle={__(
'You will receive an SMS text message confirming your phone number is valid. Does not work for Canada and possibly other regions.'
)}
subtitle={__('You will receive an SMS text message confirming your phone number is valid.')}
actions={
<Fragment>
<Button

20
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -51,14 +51,14 @@ type Props = {
toggleVideoTheaterMode: () => void,
};
type VideoJSOptions = {
controls: boolean,
preload: string,
playbackRates: Array<number>,
responsive: boolean,
poster?: string,
muted?: boolean,
};
// type VideoJSOptions = {
// controls: boolean,
// preload: string,
// playbackRates: Array<number>,
// responsive: boolean,
// poster: ?string,
// muted: ?boolean,
// };
const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
@ -67,7 +67,7 @@ const IS_IOS =
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream;
const VIDEO_JS_OPTIONS: VideoJSOptions = {
const VIDEO_JS_OPTIONS = {
preload: 'auto',
playbackRates: videoPlaybackRates,
responsive: true,
@ -172,9 +172,7 @@ properties for this component should be kept to ONLY those that if changed shoul
*/
export default React.memo<Props>(function VideoJs(props: Props) {
const { autoplay, startMuted, source, sourceType, poster, isAudio, onPlayerReady, toggleVideoTheaterMode } = props;
const [reload, setReload] = useState('initial');
const playerRef = useRef();
const containerRef = useRef();
const videoJsOptions = {

5
ui/component/viewers/videoViewer/view.jsx
View file

@ -73,6 +73,8 @@ function VideoViewer(props: Props) {
const claimId = claim && claim.claim_id;
const isAudio = contentType.includes('audio');
const forcePlayer = FORCE_CONTENT_TYPE_PLAYER.includes(contentType);
const previousUri = usePrevious(uri);
const embedded = useContext(EmbedContext);
const [isPlaying, setIsPlaying] = useState(false);
const [showAutoplayCountdown, setShowAutoplayCountdown] = useState(false);
const [isEndededEmbed, setIsEndededEmbed] = useState(false);
@ -82,9 +84,6 @@ function VideoViewer(props: Props) {
breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */
const [isLoading, setIsLoading] = useState(false);
const previousUri = usePrevious(uri);
const embedded = useContext(EmbedContext);
// force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true)
useEffect(() => {
if (uri && previousUri && uri !== previousUri) {

4
ui/component/webUploadList/view.jsx
View file

@ -21,7 +21,9 @@ export default function WebUploadList(props: Props) {
!!uploadCount && (
<Card
title={__('Currently uploading')}
subtitle={uploadCount > 1 ? __('You files are currently uploading.') : __('Your file is currently uploading.')}
subtitle={
uploadCount > 1 ? __('You videos are currently uploading.') : __('Your video is currently uploading.')
}
body={
<section>
{/* $FlowFixMe */}

2
ui/component/youtubeTransferStatus/view.jsx
View file

@ -119,7 +119,7 @@ export default function YoutubeTransferStatus(props: Props) {
<I18nMessage
tokens={{ here: <Button button="link" href="https://lbry.com/faq/youtube" label={__('here')} /> }}
>
Email help@lbry.com if you think there has been a mistake. Make sure your channel qualifies %here%.
Email help@odysee.com if you think there has been a mistake. Make sure your channel qualifies %here%.
</I18nMessage>
)}
</span>

19
ui/constants/comment.js
View file

@ -3,3 +3,22 @@ export const LINKED_COMMENT_QUERY_PARAM = 'lc';
export const SORT_COMMENTS_NEW = 'new';
export const SORT_COMMENTS_BEST = 'best';
export const SORT_COMMENTS_CONTROVERSIAL = 'controversial';
export const BANNED_LIVESTREAM_WORDS = [
'n1gga',
'f4ggot',
'faggot',
'nigga',
'nigger',
'F4G',
'fag',
'n1gger',
'faget',
'niggah',
'n1ggah',
'jew',
'j3w',
'goy',
'goyim',
'fagot',
];

1
ui/constants/form-field.js
View file

@ -1,3 +1,4 @@
export const FF_MAX_CHARS_DEFAULT = 2000;
export const FF_MAX_CHARS_IN_COMMENT = 2000;
export const FF_MAX_CHARS_IN_LIVESTREAM_COMMENT = 300;
export const FF_MAX_CHARS_IN_DESCRIPTION = 5000;

1
ui/constants/pages.js
View file

@ -61,3 +61,4 @@ exports.CHANNEL_NEW = 'channel/new';
exports.NOTIFICATIONS = 'notifications';
exports.YOUTUBE_SYNC = 'youtube';
exports.LIVESTREAM = 'livestream';
exports.GENERAL = 'general';

4
ui/modal/modalPublish/view.jsx
View file

@ -40,7 +40,7 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
'Your livestream is now pending. You will be able to start shortly at the streaming dashboard.'
);
} else {
publishMessage = __('Your file is now pending on LBRY. It will take a few minutes to appear for other users.');
publishMessage = __('Your video will appear on Odysee shortly.');
}
function handleClose() {
@ -51,7 +51,7 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
return (
<Modal isOpen type="card" contentLabel={__(contentLabel)} onAborted={handleClose}>
<Card
title={__('Success')}
title={livestream ? __('Livestream Created') : __('Upload Complete')}
subtitle={publishMessage}
body={
<React.Fragment>

6
ui/modal/modalRemoveFile/view.jsx
View file

@ -52,10 +52,8 @@ function ModalRemoveFile(props: Props) {
<FormField
name="claim_abandon"
label={
<I18nMessage
tokens={{ lbc: <LbcSymbol prefix={__('reclaim %amount%', { amount: claim.amount })} /> }}
>
Abandon on blockchain (%lbc%)
<I18nMessage tokens={{ lbc: <LbcSymbol postfix={claim.amount} /> }}>
Abandon on blockchain (reclaim %lbc%)
</I18nMessage>
}
type="checkbox"

2
ui/modal/modalTransactionFailed/view.jsx
View file

@ -12,7 +12,7 @@ class ModalTransactionFailed extends React.PureComponent<Props> {
return (
<Modal isOpen contentLabel={__('Transaction failed')} title={__('Transaction failed')} onConfirmed={closeModal}>
<p>{__('Sorry about that. Contact help@lbry.com if you continue to have issues.')}</p>
<p>{__('Sorry about that. Contact help@odysee.com if you continue to have issues.')}</p>
</Modal>
);
}

32
ui/modal/modalYoutubeWelcome/view.jsx
View file

@ -1,4 +1,5 @@
// @flow
import { SIMPLE_SITE } from 'config';
import * as PAGES from 'constants/pages';
import React from 'react';
import { Modal } from 'modal/modal';
@ -15,18 +16,27 @@ const YoutubeWelcome = (props: Props) => {
<Modal isOpen type="card" onAborted={doHideModal}>
<Confetti recycle={false} style={{ position: 'fixed' }} numberOfPieces={100} />
<Card
title={__("You're free!")}
title={!SIMPLE_SITE ? __("You're free!") : __('Welcome to Odysee')}
subtitle={
<React.Fragment>
<p>
{__("You've escaped the land of spying, censorship, and exploitation.")}
<span className="emoji"> 💩</span>
</p>
<p>
{__('Welcome to the land of content freedom.')}
<span className="emoji"> 🌈</span>
</p>
</React.Fragment>
!SIMPLE_SITE ? (
<React.Fragment>
<p>
{__("You've escaped the land of spying, censorship, and exploitation.")}
<span className="emoji"> 💩</span>
</p>
<p>
{__('Welcome to the land of content freedom.')}
<span className="emoji"> 🌈</span>
</p>
</React.Fragment>
) : (
<React.Fragment>
<p>
{__('You make the party extra special!')}
<span className="emoji"> 💖</span>
</p>
</React.Fragment>
)
}
actions={
<div className="card__actions">

12
ui/page/adsTest/index.js Normal file
View file

@ -0,0 +1,12 @@
import { connect } from 'react-redux';
import { makeSelectClaimForUri, doResolveUri } from 'lbry-redux';
import AdsTestPage from './view';
export default connect(
(state) => ({
claim: makeSelectClaimForUri('lbry://fullscreenrelease#7')(state),
}),
{
doResolveUri,
}
)(AdsTestPage);

20
ui/page/adsTest/view.jsx Normal file
View file

@ -0,0 +1,20 @@
// @flow
// import React from 'react';
// import FilePage from 'page/file';
type Props = {
doResolveUri: (string) => void,
claim: ?StreamClaim,
};
export default function AdsTestPage(props: Props) {
return null;
// const { doResolveUri, claim } = props;
// const hasClaim = claim !== undefined;
// React.useEffect(() => {
// if (!hasClaim) {
// doResolveUri('lbry://fullscreenrelease#7');
// }
// }, [hasClaim, doResolveUri]);
// return <div>{hasClaim && <FilePage uri="lbry://fullscreenrelease#7" />}</div>;
}

8
ui/page/buy/view.jsx
View file

@ -18,7 +18,7 @@ const MOONPAY_KEY = process.env.MOONPAY_SECRET_KEY;
const COUNTRIES = Array.from(
new Set(
countryData.all
.map(country => country.name)
.map((country) => country.name)
.sort((a, b) => {
if (a > b) {
return 1;
@ -39,7 +39,7 @@ type Props = {
email: string,
user: ?User,
doGetNewAddress: () => void,
doUserSetCountry: string => void,
doUserSetCountry: (string) => void,
};
export default function BuyPage(props: Props) {
@ -65,7 +65,7 @@ export default function BuyPage(props: Props) {
React.useEffect(() => {
if (MOONPAY_KEY && !url && receiveAddress) {
let url = `https://buy.moonpay.io?apiKey=pk_live_xNFffrN5NWKy6fu0ggbV8VQIwRieRzy&colorCode=%23257761&currencyCode=lbc&showWalletAddressForm=true&walletAddress=${receiveAddress}`;
let url = `https://buy.moonpay.io?apiKey=pk_live_xNFffrN5NWKy6fu0ggbV8VQIwRieRzy&colorCode=%23fa6165&currencyCode=lbc&showWalletAddressForm=true&walletAddress=${receiveAddress}`;
if (email) {
url += `&email=${encodeURIComponent(email)}`;
}
@ -148,7 +148,7 @@ export default function BuyPage(props: Props) {
'Only some countries are eligible at this time. We are working to make this available to everyone.'
)}
value={country}
onChange={e => setCountry(e.target.value)}
onChange={(e) => setCountry(e.target.value)}
>
<option value="" disabled defaultValue>
{__('Select your country')}

2
ui/page/channels/view.jsx
View file

@ -109,7 +109,7 @@ export default function ChannelsPage(props: Props) {
subtitle={__("You haven't created a channel yet. All of your beautiful channels will be listed here!")}
actions={
<div className="section__actions">
<Button button="primary" label={__('New Channel')} navigate={`/$/${PAGES.CHANNEL_NEW}`} />
<Button button="primary" label={__('Create Channel')} navigate={`/$/${PAGES.CHANNEL_NEW}`} />
</div>
}
/>

3
ui/page/channelsFollowing/view.jsx
View file

@ -23,6 +23,7 @@ function ChannelsFollowingPage(props: Props) {
) : (
<Page noFooter fullWidthPage={tileLayout}>
<ClaimListDiscover
hideAdvancedFilter
tileLayout={tileLayout}
headerLabel={
<span>
@ -31,7 +32,7 @@ function ChannelsFollowingPage(props: Props) {
</span>
}
defaultOrderBy={ORDER_BY_NEW}
channelIds={subscribedChannels.map(sub => sub.uri.split('#')[1])}
channelIds={subscribedChannels.map((sub) => sub.uri.split('#')[1])}
meta={
<Button
icon={ICONS.SEARCH}

163
ui/page/channelsFollowingDiscover/view.jsx
View file

@ -1,13 +1,12 @@
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
// import * as ICONS from 'constants/icons';
// import * as PAGES from 'constants/pages';
import * as CS from 'constants/claim_search';
import React from 'react';
import Page from 'component/page';
import Button from 'component/button';
import ClaimTilesDiscover from 'component/claimTilesDiscover';
// import Button from 'component/button';
import ClaimListDiscover from 'component/claimListDiscover';
import * as CS from 'constants/claim_search';
import { toCapitalCase } from 'util/string';
// import { toCapitalCase } from 'util/string';
import { SIMPLE_SITE } from 'config';
const MORE_CHANNELS_ANCHOR = 'MoreChannels';
@ -19,89 +18,87 @@ type Props = {
homepageData: any,
};
type ChannelsFollowingItem = {
title: string,
link?: string,
help?: any,
options?: {},
};
function ChannelsFollowingDiscover(props: Props) {
const { followedTags, subscribedChannels, blockedChannels, homepageData } = props;
const {
// followedTags,
// subscribedChannels,
// blockedChannels,
homepageData,
} = props;
const { PRIMARY_CONTENT_CHANNEL_IDS } = homepageData;
let rowData: Array<ChannelsFollowingItem> = [];
const notChannels = subscribedChannels
.map(({ uri }) => uri)
.concat(blockedChannels)
.map(uri => uri.split('#')[1]);
// let rowData: Array<ChannelsFollowingItem> = [];
// const notChannels = subscribedChannels
// .map(({ uri }) => uri)
// .concat(blockedChannels)
// .map(uri => uri.split('#')[1]);
rowData.push({
title: 'Top Channels Of All Time',
link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
options: {
pageSize: 12,
claimType: 'channel',
orderBy: ['effective_amount'],
},
});
// rowData.push({
// title: 'Top Channels Of All Time',
// link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
// options: {
// pageSize: 12,
// claimType: 'channel',
// orderBy: ['effective_amount'],
// },
// });
rowData.push({
title: 'Latest From @lbrycast',
link: `/@lbrycast:4`,
options: {
orderBy: ['release_time'],
pageSize: 8,
channelIds: ['4c29f8b013adea4d5cca1861fb2161d5089613ea'],
},
});
// rowData.push({
// title: 'Latest From @lbrycast',
// link: `/@lbrycast:4`,
// options: {
// orderBy: ['release_time'],
// pageSize: 8,
// channelIds: ['4c29f8b013adea4d5cca1861fb2161d5089613ea'],
// },
// });
rowData.push({
title: 'Trending Channels',
link: `/$/${PAGES.DISCOVER}?claim_type=channel`,
options: {
pageSize: 8,
claimType: 'channel',
orderBy: ['trending_group', 'trending_mixed'],
},
});
// rowData.push({
// title: 'Trending Channels',
// link: `/$/${PAGES.DISCOVER}?claim_type=channel`,
// options: {
// pageSize: 8,
// claimType: 'channel',
// orderBy: ['trending_group', 'trending_mixed'],
// },
// });
if (followedTags.length > 0 && followedTags.length < 5) {
const followedRows = followedTags.map((tag: Tag) => ({
title: `Trending Channels for #${toCapitalCase(tag.name)}`,
link: `/$/${PAGES.DISCOVER}?t=${tag.name}&claim_type=channel`,
options: {
claimType: 'channel',
pageSize: 4,
tags: [tag.name],
},
}));
rowData.push(...followedRows);
}
// if (followedTags.length > 0 && followedTags.length < 5) {
// const followedRows = followedTags.map((tag: Tag) => ({
// title: `Trending Channels for #${toCapitalCase(tag.name)}`,
// link: `/$/${PAGES.DISCOVER}?t=${tag.name}&claim_type=channel`,
// options: {
// claimType: 'channel',
// pageSize: 4,
// tags: [tag.name],
// },
// }));
// rowData.push(...followedRows);
// }
if (followedTags.length > 4) {
rowData.push({
title: 'Trending For Your Tags',
link: `/$/${PAGES.TAGS_FOLLOWING}?claim_type=channel`,
options: {
claimType: 'channel',
tags: followedTags.map(tag => tag.name),
},
});
}
// if (followedTags.length > 4) {
// rowData.push({
// title: 'Trending For Your Tags',
// link: `/$/${PAGES.TAGS_FOLLOWING}?claim_type=channel`,
// options: {
// claimType: 'channel',
// tags: followedTags.map(tag => tag.name),
// },
// });
// }
const rowDataWithGenericOptions = rowData.map(row => {
return {
...row,
options: {
...row.options,
notChannels,
},
};
});
// const rowDataWithGenericOptions = rowData.map(row => {
// return {
// ...row,
// options: {
// ...row.options,
// notChannels,
// },
// };
// });
return (
<Page>
{rowDataWithGenericOptions.map(({ title, link, help, options = {} }) => (
{/* {rowDataWithGenericOptions.map(({ title, link, help, options = {} }) => (
<div key={title} className="claim-grid__wrapper">
<h1 className="section__actions">
{link ? (
@ -120,17 +117,17 @@ function ChannelsFollowingDiscover(props: Props) {
<ClaimTilesDiscover {...options} />
</div>
))}
<h1 id={MORE_CHANNELS_ANCHOR} className="claim-grid__title">
{__('More Channels')}
</h1>
{/* odysee: claimIds = PRIMARY_CONTENT_CHANNEL_IDS if simplesite CLD */}
))} */}
<ClaimListDiscover
defaultOrderBy={CS.ORDER_BY_TRENDING}
defaultFreshness={CS.FRESH_ALL}
claimType={CS.CLAIM_CHANNEL}
claimIds={SIMPLE_SITE ? PRIMARY_CONTENT_CHANNEL_IDS : undefined}
scrollAnchor={MORE_CHANNELS_ANCHOR}
maxPages={3}
hideFilters
header={<h1 className="section__title">{__('Moon cheese is an acquired taste')}</h1>}
/>
</Page>
);

24
ui/page/discover/view.jsx
View file

@ -1,6 +1,7 @@
// @flow
import { SHOW_ADS, DOMAIN, SIMPLE_SITE } from 'config';
import * as ICONS from 'constants/icons';
import * as CS from 'constants/claim_search';
import React, { useRef } from 'react';
import Page from 'component/page';
import ClaimListDiscover from 'component/claimListDiscover';
@ -10,18 +11,18 @@ import { useIsMobile } from 'effects/use-screensize';
import analytics from 'analytics';
import HiddenNsfw from 'component/common/hidden-nsfw';
import Icon from 'component/common/icon';
import * as CS from 'constants/claim_search';
import Ads from 'web/component/ads';
import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage';
import moment from 'moment';
type Props = {
location: { search: string },
followedTags: Array<Tag>,
repostedUri: string,
repostedClaim: ?GenericClaim,
doToggleTagFollowDesktop: string => void,
doResolveUri: string => void,
doToggleTagFollowDesktop: (string) => void,
doResolveUri: (string) => void,
isAuthenticated: boolean,
dynamicRouteProps: RowDataItem,
tileLayout: boolean,
@ -87,8 +88,8 @@ function DiscoverPage(props: Props) {
} else {
headerLabel = (
<span>
<Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.DISCOVER} size={10} />
{(dynamicRouteProps && dynamicRouteProps.title) || __('All Content')}
<Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.WILD_WEST} size={10} />
{(dynamicRouteProps && dynamicRouteProps.title) || __('Wild West')}
</span>
);
}
@ -96,9 +97,11 @@ function DiscoverPage(props: Props) {
return (
<Page noFooter fullWidthPage={tileLayout}>
<ClaimListDiscover
limitClaimsPerChannel={3}
hideAdvancedFilter
hideFilters={!dynamicRouteProps}
header={repostedUri ? <span /> : undefined}
tileLayout={repostedUri ? false : tileLayout}
defaultOrderBy={dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING}
claimType={claimType ? [claimType] : undefined}
headerLabel={headerLabel}
tags={tags}
@ -107,9 +110,18 @@ function DiscoverPage(props: Props) {
injectedItem={
SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false
}
// Assume wild west page if no dynamicRouteProps
// Not a very good solution, but just doing it for now
// until we are sure this page will stay around
releaseTime={!dynamicRouteProps && `>${Math.floor(moment().subtract(1, 'day').startOf('week').unix())}`}
feeAmount={!dynamicRouteProps && CS.FEE_AMOUNT_ANY}
channelIds={
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
}
limitClaimsPerChannel={
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) ||
undefined
}
meta={
!dynamicRouteProps ? (
<a

14
ui/page/file/index.js
View file

@ -8,6 +8,8 @@ import {
makeSelectClaimIsNsfw,
SETTINGS,
makeSelectTagInClaimOrChannelForUri,
makeSelectClaimIsMine,
makeSelectClaimForUri,
} from 'lbry-redux';
import { makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
import { selectShowMatureContent, makeSelectClientSetting } from 'redux/selectors/settings';
@ -32,14 +34,16 @@ const select = (state, props) => {
renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
commentsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
claim: makeSelectClaimForUri(props.uri)(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
};
};
const perform = dispatch => ({
fetchFileInfo: uri => dispatch(doFetchFileInfo(uri)),
fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
setViewed: uri => dispatch(doSetContentHistoryItem(uri)),
setPrimaryUri: uri => dispatch(doSetPrimaryUri(uri)),
const perform = (dispatch) => ({
fetchFileInfo: (uri) => dispatch(doFetchFileInfo(uri)),
fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri)),
setViewed: (uri) => dispatch(doSetContentHistoryItem(uri)),
setPrimaryUri: (uri) => dispatch(doSetPrimaryUri(uri)),
});
export default withRouter(connect(select, perform)(FilePage));

31
ui/page/file/view.jsx
View file

@ -1,4 +1,6 @@
// @flow
import { LIVE_STREAM_CHANNEL_CLAIM_ID, LIVE_STREAM_TAG } from 'constants/livestream';
import * as PAGES from 'constants/pages';
import * as React from 'react';
import classnames from 'classnames';
import Page from 'component/page';
@ -10,6 +12,9 @@ import FileRenderDownload from 'component/fileRenderDownload';
import RecommendedContent from 'component/recommendedContent';
import CommentsList from 'component/commentsList';
import PostViewer from 'component/postViewer';
import { Redirect } from 'react-router';
import Button from 'component/button';
import I18nMessage from 'component/i18nMessage';
import Empty from 'component/common/empty';
export const PRIMARY_PLAYER_WRAPPER_CLASS = 'file-page__video-container';
@ -27,6 +32,8 @@ type Props = {
linkedComment: any,
setPrimaryUri: (?string) => void,
videoTheaterMode: boolean,
claim: ?Claim,
claimIsMine: boolean,
commentsDisabled: boolean,
};
@ -44,11 +51,19 @@ function FilePage(props: Props) {
linkedComment,
setPrimaryUri,
videoTheaterMode,
claim,
claimIsMine,
commentsDisabled,
} = props;
const cost = costInfo ? costInfo.cost : null;
const hasFileInfo = fileInfo !== undefined;
const isMarkdown = renderMode === RENDER_MODES.MARKDOWN;
const isLivestream =
claim &&
claim.signing_channel &&
claim.signing_channel.claim_id === LIVE_STREAM_CHANNEL_CLAIM_ID &&
claim.value.tags &&
claim.value.tags.includes(LIVE_STREAM_TAG);
React.useEffect(() => {
// always refresh file info when entering file page to see if we have the file
@ -113,6 +128,10 @@ function FilePage(props: Props) {
);
}
if (!claimIsMine && isLivestream) {
return <Redirect to={`/$/${PAGES.LIVESTREAM}`} />;
}
if (obscureNsfw && isMature) {
return (
<Page>
@ -129,6 +148,18 @@ function FilePage(props: Props) {
{!isMarkdown && (
<div className="file-page__secondary-content">
<div>
{claimIsMine && isLivestream && (
<div className="livestream__creator-message">
<h4>{__('Only visible to you')}</h4>
<I18nMessage>
People who view this link will be redirected to your livestream. Make sure to use this for sharing
so your title and thumbnail are displayed properly.
</I18nMessage>
<div className="section__actions">
<Button button="primary" navigate={`/$/${PAGES.LIVESTREAM}`} label={__('View livestream')} />
</div>
</div>
)}
{RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />}
{commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
{!commentsDisabled && <CommentsList uri={uri} linkedComment={linkedComment} />}

19
ui/page/help/view.jsx
View file

@ -1,4 +1,5 @@
// @flow
import { SITE_NAME } from 'config';
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import * as React from 'react';
@ -129,19 +130,13 @@ class HelpPage extends React.PureComponent<Props, State> {
return (
<Page className="card-stack">
<Card
title={__('Read the FAQ')}
subtitle={__('Our FAQ answers many common questions.')}
title={__('Visit the %SITE_NAME% Help Hub', { SITE_NAME })}
subtitle={__('Our support posts answer many common questions.')}
actions={
<div className="section__actions">
<Button
href="https://lbry.com/faq/lbry-basics"
label={__('Read the App Basics FAQ')}
icon={ICONS.HELP}
button="secondary"
/>
<Button
href="https://lbry.com/faq"
label={__('View all LBRY FAQs')}
href="https://odysee.com/@OdyseeHelp:b"
label={__('View %SITE_NAME% Help Hub', { SITE_NAME })}
icon={ICONS.HELP}
button="secondary"
/>
@ -160,7 +155,7 @@ class HelpPage extends React.PureComponent<Props, State> {
actions={
<div className="section__actions">
<Button button="secondary" label={__('Join Our Chat')} icon={ICONS.CHAT} href="https://chat.lbry.com" />
<Button button="secondary" label={__('Email Us')} icon={ICONS.WEB} href="mailto:help@lbry.com" />
<Button button="secondary" label={__('Email Us')} icon={ICONS.WEB} href="mailto:help@odysee.com" />
</div>
}
/>
@ -210,7 +205,6 @@ class HelpPage extends React.PureComponent<Props, State> {
/>
<WalletBackup />
{/* @endif */}
<Card
title={__('About --[About section in Help Page]--')}
@ -295,6 +289,7 @@ class HelpPage extends React.PureComponent<Props, State> {
</div>
}
/>
{/* @endif */}
</Page>
);
}

9
ui/page/home/view.jsx
View file

@ -79,9 +79,12 @@ function HomePage(props: Props) {
</p>
</div>
)}
<h1 className="home__meme">{__("Obviously, You're Not A Golfer.")}</h1>
{rowData.map(({ title, route, link, icon, help, options = {} }, index) => (
<div key={title} className="claim-grid__wrapper">
{title && (
{index !== 0 && title && typeof title === 'string' && (
<h1 className="claim-grid__header">
<Button navigate={route || link} button="link">
{icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
@ -91,8 +94,8 @@ function HomePage(props: Props) {
</h1>
)}
<ClaimTilesDiscover {...options} />
{link && (
<ClaimTilesDiscover {...options} pin={route === `/$/${PAGES.GENERAL}`} />
{(route || link) && (
<Button
className="claim-grid__title--secondary"
button="link"

6
ui/page/rewards/view.jsx
View file

@ -78,8 +78,8 @@ class RewardsPage extends PureComponent<Props> {
rewards_faq: <Button button="link" label={__('Rewards FAQ')} href="https://lbry.com/faq/support" />,
}}
>
Please review the %rewards_faq% for eligibility, and send us an email to help@lbry.com if you continue
to see this message. You can continue to use LBRY without this feature.
Please review the %rewards_faq% for eligibility, and send us an email to help@odysee.com if you
continue to see this message. You can continue to use LBRY without this feature.
</I18nMessage>
{`${__('Enjoy all the awesome free content in the meantime!')}`}
</p>
@ -156,7 +156,7 @@ class RewardsPage extends PureComponent<Props> {
'card--disabled': isNotEligible,
})}
>
{rewards.map(reward => (
{rewards.map((reward) => (
<RewardTile key={reward.claim_code} reward={reward} />
))}
{this.renderCustomRewardCode()}

13
ui/page/search/index.js
View file

@ -14,17 +14,12 @@ import analytics from 'analytics';
import SearchPage from './view';
const select = (state, props) => {
const showMature = makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state);
const urlParams = new URLSearchParams(props.location.search);
let urlQuery = urlParams.get('q') || null;
if (urlQuery) {
urlQuery = urlQuery.replace(/^lbry:\/\//i, '').replace(/\//, ' ');
}
const query = makeSelectQueryWithOptions(
urlQuery,
showMature === false ? { nsfw: false, isBackgroundSearch: false } : { isBackgroundSearch: false }
)(state);
const query = makeSelectQueryWithOptions(urlQuery, { nsfw: false, isBackgroundSearch: false })(state);
const uris = makeSelectSearchUris(query)(state);
return {
@ -36,9 +31,9 @@ const select = (state, props) => {
};
};
const perform = dispatch => ({
const perform = (dispatch) => ({
search: (query, options) => dispatch(doSearch(query, options)),
onFeedbackPositive: query => {
onFeedbackPositive: (query) => {
analytics.apiSearchFeedback(query, 1);
dispatch(
doToast({
@ -46,7 +41,7 @@ const perform = dispatch => ({
})
);
},
onFeedbackNegative: query => {
onFeedbackNegative: (query) => {
analytics.apiSearchFeedback(query, 0);
dispatch(
doToast({

47
ui/page/search/view.jsx
View file

@ -24,8 +24,8 @@ type Props = {
isSearching: boolean,
location: UrlLocation,
uris: Array<string>,
onFeedbackNegative: string => void,
onFeedbackPositive: string => void,
onFeedbackNegative: (string) => void,
onFeedbackPositive: (string) => void,
showNsfw: boolean,
isAuthenticated: boolean,
};
@ -38,7 +38,7 @@ export default function SearchPage(props: Props) {
onFeedbackNegative,
location,
isSearching,
showNsfw,
// showNsfw,
isAuthenticated,
searchOptions,
} = props;
@ -47,12 +47,9 @@ export default function SearchPage(props: Props) {
const urlQuery = urlParams.get('q') || '';
const additionalOptions: AdditionalOptions = { isBackgroundSearch: false };
additionalOptions['nsfw'] = showNsfw;
additionalOptions['nsfw'] = false;
const modifiedUrlQuery = urlQuery
.trim()
.replace(/\s+/g, '')
.replace(/:/g, '#');
const modifiedUrlQuery = urlQuery.trim().replace(/\s+/g, '').replace(/:/g, '#');
const uriFromQuery = `lbry://${modifiedUrlQuery}`;
let streamName;
@ -72,7 +69,7 @@ export default function SearchPage(props: Props) {
try {
const dummyUrlForClaimId = `x#${urlQuery}`;
({ claimId } = parseURI(dummyUrlForClaimId));
Lbry.claim_search({ claim_id: claimId }).then(res => {
Lbry.claim_search({ claim_id: claimId }).then((res) => {
if (res.items && res.items.length) {
const claim = res.items[0];
const url = formatLbryUrlForWeb(claim.canonical_url);
@ -105,21 +102,23 @@ export default function SearchPage(props: Props) {
SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false
}
headerAltControls={
<>
<span>{__('Find what you were looking for?')}</span>
<Button
button="alt"
description={__('Yes')}
onClick={() => onFeedbackPositive(urlQuery)}
icon={ICONS.YES}
/>
<Button
button="alt"
description={__('No')}
onClick={() => onFeedbackNegative(urlQuery)}
icon={ICONS.NO}
/>
</>
!SIMPLE_SITE && (
<>
<span>{__('Find what you were looking for?')}</span>
<Button
button="alt"
description={__('Yes')}
onClick={() => onFeedbackPositive(urlQuery)}
icon={ICONS.YES}
/>
<Button
button="alt"
description={__('No')}
onClick={() => onFeedbackNegative(urlQuery)}
icon={ICONS.NO}
/>
</>
)
}
/>
{isSearching && new Array(5).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}

42
ui/page/settings/view.jsx
View file

@ -1,6 +1,6 @@
// @flow
import * as PAGES from 'constants/pages';
import * as MODALS from 'constants/modal_types';
// import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import * as React from 'react';
import { SETTINGS } from 'lbry-redux';
@ -17,7 +17,7 @@ import classnames from 'classnames';
import { getPasswordFromCookie } from 'util/saved-passwords';
// $FlowFixMe
import homepages from 'homepages';
import { Lbryio } from 'lbryinc';
// import { Lbryio } from 'lbryinc';
import Yrbl from 'component/yrbl';
type Price = {
@ -27,10 +27,10 @@ type Price = {
type SetDaemonSettingArg = boolean | string | number;
type DarkModeTimes = {
from: { hour: string, min: string, formattedTime: string },
to: { hour: string, min: string, formattedTime: string },
};
// type DarkModeTimes = {
// from: { hour: string, min: string, formattedTime: string },
// to: { hour: string, min: string, formattedTime: string },
// };
type OptionTimes = {
fromTo: string,
@ -64,7 +64,7 @@ type Props = {
floatingPlayer: boolean,
hideReposts: ?boolean,
clearPlayingUri: () => void,
darkModeTimes: DarkModeTimes,
// darkModeTimes: DarkModeTimes,
setDarkTime: (string, {}) => void,
openModal: (string) => void,
language?: string,
@ -160,11 +160,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
const {
daemonSettings,
allowAnalytics,
showNsfw,
// showNsfw,
isAuthenticated,
currentTheme,
themes,
automaticDarkModeEnabled,
// automaticDarkModeEnabled,
autoplay,
walletEncrypted,
// autoDownload,
@ -172,16 +172,16 @@ class SettingsPage extends React.PureComponent<Props, State> {
setClientSetting,
toggle3PAnalytics,
floatingPlayer,
hideReposts,
// hideReposts,
clearPlayingUri,
darkModeTimes,
// darkModeTimes,
clearCache,
openModal,
// openModal,
} = this.props;
const { storedPassword } = this.state;
const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
const startHours = ['18', '19', '20', '21'];
const endHours = ['5', '6', '7', '8'];
// const startHours = ['18', '19', '20', '21'];
// const endHours = ['5', '6', '7', '8'];
return (
<Page
@ -258,7 +258,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
label={__('Theme')}
onChange={this.onThemeChange}
value={currentTheme}
disabled={automaticDarkModeEnabled}
// disabled={automaticDarkModeEnabled}
>
{themes.map((theme) => (
<option key={theme} value={theme}>
@ -267,7 +267,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
))}
</FormField>
</fieldset-section>
<fieldset-section>
{/* <fieldset-section>
<FormField
type="checkbox"
name="automatic_dark_mode"
@ -305,7 +305,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
</FormField>
</fieldset-group>
)}
</fieldset-section>
</fieldset-section> */}
</React.Fragment>
}
/>
@ -337,7 +337,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
)}
/>
<FormField
{/* <FormField
type="checkbox"
name="hide_reposts"
onChange={(e) => {
@ -351,7 +351,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
checked={hideReposts}
label={__('Hide reposts')}
helper={__('You will not see reposts by people you follow or receive email notifying about them.')}
/>
/> */}
{/* <FormField
type="checkbox"
@ -362,7 +362,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
helper={__('Anonymous content is published without a channel.')}
/> */}
<FormField
{/* <FormField
type="checkbox"
name="show_nsfw"
onChange={() =>
@ -375,7 +375,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
helper={__(
'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction. '
)}
/>
/> */}
</React.Fragment>
}
/>

9
ui/page/show/index.js
View file

@ -1,3 +1,4 @@
import * as PAGES from 'constants/pages';
import { DOMAIN } from 'config';
import { connect } from 'react-redux';
import { PAGE_SIZE } from 'constants/claim';
@ -11,7 +12,10 @@ import {
makeSelectClaimIsMine,
makeSelectClaimIsPending,
makeSelectClaimHasSource,
doClearPublish,
doPrepareEdit,
} from 'lbry-redux';
import { push } from 'connected-react-router';
import { makeSelectChannelInSubscriptions } from 'redux/selectors/subscriptions';
import { selectBlackListedOutpoints } from 'lbryinc';
import ShowPage from './view';
@ -67,6 +71,11 @@ const select = (state, props) => {
const perform = (dispatch) => ({
resolveUri: (uri) => dispatch(doResolveUri(uri)),
beginPublish: (name) => {
dispatch(doClearPublish());
dispatch(doPrepareEdit({ name }));
dispatch(push(`/$/${PAGES.PUBLISH}`));
},
});
export default connect(select, perform)(ShowPage);

19
ui/page/show/view.jsx
View file

@ -10,7 +10,9 @@ import Page from 'component/page';
import Button from 'component/button';
import Card from 'component/common/card';
import AbandonedChannelPreview from 'component/abandonedChannelPreview';
import Yrbl from 'component/yrbl';
import { formatLbryUrlForWeb } from 'util/url';
import { parseURI } from 'lbry-redux';
type Props = {
isResolvingUri: boolean,
@ -27,6 +29,8 @@ type Props = {
claimIsMine: boolean,
claimIsPending: boolean,
isLivestream: boolean,
claimIsMine: Boolean,
beginPublish: (string) => void,
};
function ShowPage(props: Props) {
@ -41,6 +45,7 @@ function ShowPage(props: Props) {
isSubscribed,
claimIsPending,
isLivestream,
beginPublish,
} = props;
const signingChannel = claim && claim.signing_channel;
@ -48,6 +53,7 @@ function ShowPage(props: Props) {
const claimExists = claim !== null && claim !== undefined;
const haventFetchedYet = claim === undefined;
const isMine = claim && claim.is_my_output;
const { contentName } = parseURI(uri);
useEffect(() => {
// @if TARGET='web'
@ -84,11 +90,20 @@ function ShowPage(props: Props) {
<Page>
{(claim === undefined || isResolvingUri) && (
<div className="main--empty">
<Spinner />
<Spinner delayed />
</div>
)}
{!isResolvingUri && !isSubscribed && (
<span className="empty">{__("There's nothing available at this location.")}</span>
<div className="main--empty">
<Yrbl
title={__('No Content Found')}
subtitle={
<div className="section__actions">
<Button button="primary" label={__('Publish Something')} onClick={() => beginPublish(contentName)} />
</div>
}
/>
</div>
)}
{!isResolvingUri && isSubscribed && claim === null && <AbandonedChannelPreview uri={uri} type={'large'} />}
</Page>

11
ui/page/top/view.jsx
View file

@ -5,14 +5,14 @@ import Page from 'component/page';
import ClaimListDiscover from 'component/claimListDiscover';
import ClaimEffectiveAmount from 'component/claimEffectiveAmount';
import SearchTopClaim from 'component/searchTopClaim';
import { ORDER_BY_TOP, FRESH_ALL } from 'constants/claim_search';
import * as CS from 'constants/claim_search';
import Button from 'component/button';
import I18nMessage from 'component/i18nMessage';
import * as PAGES from 'constants/pages';
type Props = {
name: string,
beginPublish: string => void,
beginPublish: (string) => void,
};
function TopPage(props: Props) {
@ -25,8 +25,9 @@ function TopPage(props: Props) {
<SearchTopClaim query={name} hideLink setChannelActive={setChannelActive} />
<ClaimListDiscover
name={channelActive ? `@${queryName}` : queryName}
defaultFreshness={FRESH_ALL}
defaultOrderBy={ORDER_BY_TOP}
defaultFreshness={CS.FRESH_ALL}
defaultOrderBy={CS.ORDER_BY_TOP}
streamType={CS.CONTENT_ALL}
meta={
<div className="search__top-links">
<I18nMessage
@ -46,7 +47,7 @@ function TopPage(props: Props) {
</div>
}
includeSupportAction
renderProperties={claim => (
renderProperties={(claim) => (
<span className="claim-preview__custom-properties">
{claim.meta.is_controlling && <span className="help--inline">{__('Currently winning')}</span>}
<ClaimEffectiveAmount uri={claim.repost_url || claim.canonical_url} />

22
ui/redux/actions/comments.js
View file

@ -2,6 +2,7 @@
import * as ACTIONS from 'constants/action_types';
import * as REACTION_TYPES from 'constants/reactions';
import { Lbry, parseURI, buildURI, selectClaimsByUri, selectMyChannelClaims } from 'lbry-redux';
// import { BANNED_LIVESTREAM_WORDS } from 'constants/comment';
import { doToast, doSeeNotifications } from 'redux/actions/notifications';
import {
makeSelectCommentIdsForUri,
@ -216,6 +217,27 @@ export function doCommentCreate(
type: ACTIONS.COMMENT_CREATE_STARTED,
});
// if (livestream) {
// const strippedCommentText = comment.trim().toLowerCase().replace(/\s/g, '');
// for (var i = 0; i < BANNED_LIVESTREAM_WORDS.length; i++) {
// const bannedWord = BANNED_LIVESTREAM_WORDS[i];
// if (strippedCommentText.includes(bannedWord)) {
// dispatch({
// type: ACTIONS.COMMENT_CREATE_FAILED,
// });
//
// dispatch(
// doToast({
// message: 'Unable to create comment.',
// isError: true,
// })
// );
//
// return;
// }
// }
// }
if (parent_id) {
const notification = makeSelectNotificationForCommentId(parent_id)(state);
if (notification && !notification.is_seen) {

12
ui/redux/reducers/search.js
View file

@ -6,13 +6,13 @@ import { SEARCH_OPTIONS } from 'constants/search';
const defaultState: SearchState = {
// $FlowFixMe
options: {
[SEARCH_OPTIONS.RESULT_COUNT]: 30,
[SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
[SEARCH_OPTIONS.MEDIA_AUDIO]: true,
[SEARCH_OPTIONS.RESULT_COUNT]: 50,
[SEARCH_OPTIONS.CLAIM_TYPE]: 'file,channel',
[SEARCH_OPTIONS.MEDIA_AUDIO]: false,
[SEARCH_OPTIONS.MEDIA_VIDEO]: true,
[SEARCH_OPTIONS.MEDIA_TEXT]: true,
[SEARCH_OPTIONS.MEDIA_IMAGE]: true,
[SEARCH_OPTIONS.MEDIA_APPLICATION]: true,
[SEARCH_OPTIONS.MEDIA_TEXT]: false,
[SEARCH_OPTIONS.MEDIA_IMAGE]: false,
[SEARCH_OPTIONS.MEDIA_APPLICATION]: false,
},
urisByQuery: {},
searching: false,

12
ui/redux/reducers/settings.js
View file

@ -8,7 +8,7 @@ import { UNSYNCED_SETTINGS } from 'config';
const { CLIENT_SYNC_KEYS } = SHARED_PREFERENCES;
const settingsToIgnore = (UNSYNCED_SETTINGS && UNSYNCED_SETTINGS.trim().split(' ')) || [];
const clientSyncKeys = settingsToIgnore.length
? CLIENT_SYNC_KEYS.filter(k => !settingsToIgnore.includes(k))
? CLIENT_SYNC_KEYS.filter((k) => !settingsToIgnore.includes(k))
: CLIENT_SYNC_KEYS;
const reducers = {};
@ -69,7 +69,7 @@ const defaultState = {
[SETTINGS.AUTOPLAY_NEXT]: true,
[SETTINGS.FLOATING_PLAYER]: true,
[SETTINGS.AUTO_DOWNLOAD]: true,
[SETTINGS.HIDE_REPOSTS]: false,
[SETTINGS.HIDE_REPOSTS]: true,
// OS
[SETTINGS.AUTO_LAUNCH]: true,
@ -88,12 +88,12 @@ reducers[ACTIONS.REHYDRATE] = (state, action) => {
return Object.assign({}, state, { clientSettings });
};
reducers[ACTIONS.FINDING_FFMPEG_STARTED] = state =>
reducers[ACTIONS.FINDING_FFMPEG_STARTED] = (state) =>
Object.assign({}, state, {
findingFFmpeg: true,
});
reducers[ACTIONS.FINDING_FFMPEG_COMPLETED] = state =>
reducers[ACTIONS.FINDING_FFMPEG_COMPLETED] = (state) =>
Object.assign({}, state, {
findingFFmpeg: false,
});
@ -119,7 +119,7 @@ reducers[ACTIONS.CLIENT_SETTING_CHANGED] = (state, action) => {
});
};
reducers[ACTIONS.UPDATE_IS_NIGHT] = state => {
reducers[ACTIONS.UPDATE_IS_NIGHT] = (state) => {
const { from, to } = state.clientSettings[SETTINGS.DARK_MODE_TIMES];
const momentNow = moment();
const startNightMoment = moment(from.formattedTime, 'HH:mm');
@ -154,7 +154,7 @@ reducers[LBRY_REDUX_ACTIONS.SHARED_PREFERENCE_SET] = (state, action) => {
});
};
reducers[ACTIONS.SYNC_CLIENT_SETTINGS] = state => {
reducers[ACTIONS.SYNC_CLIENT_SETTINGS] = (state) => {
const { clientSettings } = state;
const sharedPreferences = Object.assign({}, state.sharedPreferences);
const selectedClientSettings = getSubsetFromKeysArray(clientSettings, clientSyncKeys);

48
ui/scss/component/_ads.scss
View file

@ -83,3 +83,51 @@
.ads__claim-text--small {
font-size: var(--font-small);
}
.ads__video-nudge,
.ads__video-notify {
position: absolute;
z-index: 3;
}
.ads__video-nudge {
right: 0;
left: 0;
bottom: 0;
background-color: var(--color-primary);
color: var(--color-white);
font-weight: bold;
padding: var(--spacing-xs);
}
.ads__video-notify {
display: flex;
align-items: center;
right: 0;
top: 0;
background-color: black;
border-bottom-left-radius: var(--border-radius);
color: var(--color-white);
font-size: var(--font-small);
padding: var(--spacing-xs);
}
.ads__video-link.button--secondary {
font-size: var(--font-small);
padding: var(--spacing-xs);
height: 1.5rem;
}
.ads__video-close {
margin-left: var(--spacing-s);
border-radius: var(--border-radius);
.icon {
stroke: var(--color-white);
&:hover {
stroke: var(--color-black);
background-color: var(--color-white);
}
}
}

262
ui/scss/component/_button.scss
View file

@ -34,7 +34,14 @@
.button--primary {
background-color: var(--color-button-primary-bg);
color: var(--color-button-primary-text);
.button__label {
color: var(--color-button-primary-text);
}
.icon {
stroke: var(--color-button-primary-text);
}
&:hover {
color: var(--color-button-primary-hover-text);
@ -54,7 +61,14 @@
.button--secondary {
background-color: var(--color-button-secondary-bg);
border: 1px solid var(--color-button-secondary-border);
color: var(--color-button-secondary-text);
.button__label {
color: var(--color-button-secondary-text);
}
.icon {
stroke: var(--color-button-secondary-text);
}
&:hover {
background-color: var(--color-button-secondary-bg-hover);
@ -223,6 +237,238 @@
}
}
.button--fire {
color: var(--color-fire);
position: relative;
path {
stroke: var(--color-fire-outside);
}
}
.button__fire-particle {
position: absolute;
top: 60%;
left: 20%;
width: 2px;
height: 2px;
background-color: #ef5a00;
border-radius: 50%;
filter: drop-shadow(0 0 10px #d43322);
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__fire-glow {
width: 1px;
height: 1px;
left: var(--spacing-s);
bottom: var(--spacing-m);
position: absolute;
box-shadow: 4px 0px 10px 10px var(--color-glow);
animation: glowDecay 2.5s ease-out;
opacity: 0;
}
.button__fire-particle1 {
@extend .button__fire-particle;
right: 10%;
top: 40%;
animation: particleUp 1.5s ease-out 0;
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__fire-particle2 {
@extend .button__fire-particle;
animation: particleUp2 2s ease-out 0;
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__fire-particle3 {
@extend .button__fire-particle;
animation: particleUp3 2.2s ease-out 0;
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__fire-particle4 {
@extend .button__fire-particle1;
animation-delay: 0.5s;
}
.button__fire-particle5 {
@extend .button__fire-particle2;
animation-delay: 0.75s;
}
.button__fire-particle6 {
@extend .button__fire-particle3;
animation-delay: 0.25s;
}
@keyframes glowDecay {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes particleUp {
0% {
opacity: 0;
left: 0;
}
20% {
opacity: 1;
right: 10%;
}
50% {
right: 20%;
}
50% {
left: 10%;
}
80% {
opacity: 1;
right: 40%;
}
100% {
opacity: 0;
top: -50%;
transform: scale(0.5);
}
}
@keyframes particleUp2 {
0% {
opacity: 0;
right: 0;
}
20% {
opacity: 1;
left: 10%;
}
50% {
left: 20%;
}
50% {
right: 10%;
}
80% {
opacity: 1;
left: 40%;
}
100% {
opacity: 0;
top: -50%;
transform: scale(0.5);
}
}
@keyframes particleUp3 {
0% {
opacity: 0;
left: 30%;
}
20% {
opacity: 1;
left: 60%;
}
40% {
left: 50%;
}
80% {
opacity: 1;
right: 80%;
}
100% {
opacity: 0;
top: -50%;
transform: scale(0.5);
}
}
.button--slime {
color: var(--color-slime);
}
.button__slime-drop {
position: absolute;
top: 60%;
left: 15%;
width: 5px;
height: 5px;
background-color: #81c554;
border-radius: 50%;
filter: drop-shadow(0 0 10px #d43322);
animation-iteration-count: 2;
animation-fill-mode: both;
}
.button__slime-drop1 {
@extend .button__slime-drop;
top: 40%;
animation: dropDown 1.5s ease-out 0;
animation-iteration-count: 1;
animation-fill-mode: both;
}
.button__slime-drop2 {
@extend .button__slime-drop;
left: 35%;
top: 40%;
animation: dropDown2 1.5s ease-out 0;
animation-iteration-count: 1;
animation-fill-mode: both;
}
.button__slime-stain {
width: 1px;
height: 1px;
left: var(--spacing-s);
bottom: var(--spacing-m);
position: absolute;
box-shadow: 4px 0px 10px 10px var(--color-slime);
animation: glowDecay 2.5s ease-out;
opacity: 0;
}
@keyframes dropDown {
0% {
opacity: 1;
top: 50%;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
top: 80%;
transform: scale(0.5, 4);
}
}
@keyframes dropDown2 {
0% {
opacity: 1;
top: 50%;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
top: 80%;
transform: scale(0.5, 6);
}
}
.button--disabled {
opacity: 0.5;
}
@ -303,8 +549,8 @@ svg + .button__label {
}
.button-toggle--active {
color: var(--color-primary);
background-color: var(--color-primary-alt);
color: var(--color-button-toggle-text);
background-color: var(--color-button-toggle-bg);
svg {
opacity: 1;
@ -313,7 +559,7 @@ svg + .button__label {
&:hover {
cursor: default;
text-decoration: none;
background-color: var(--color-primary-alt);
background-color: var(--color-button-toggle-bg-hover);
}
}
@ -348,6 +594,12 @@ svg + .button__label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.button--file-action {
&:first-child {
margin-right: var(--spacing-s);
}
}
}
.button-toggle-group-action {

31
ui/scss/component/_card.scss
View file

@ -17,7 +17,7 @@
.card--section {
position: relative;
padding: var(--spacing-l);
padding: var(--spacing-m);
}
.card--reward-total {
@ -82,7 +82,7 @@
.card__title-section {
@extend .section__flex;
padding: var(--spacing-m) var(--spacing-l);
padding: var(--spacing-s) var(--spacing-m);
@media (max-width: $breakpoint-small) {
padding: 0;
@ -90,7 +90,7 @@
}
.card__title-section--body-list {
padding: var(--spacing-m);
padding: var(--spacing-s);
@media (max-width: $breakpoint-small) {
padding: 0;
@ -98,7 +98,11 @@
}
.card__title-section--small {
padding: var(--spacing-s) var(--spacing-m);
padding: 0;
@media (min-width: $breakpoint-small) {
padding: var(--spacing-s) var(--spacing-m);
}
}
.card__actions--inline {
@ -175,7 +179,7 @@
.card__title {
display: block;
align-items: center;
font-size: var(--font-title);
font-size: var(--font-large);
font-weight: var(--font-weight-light);
& > *:not(:last-child) {
@ -200,8 +204,7 @@
.card__title-actions {
align-self: flex-start;
padding: var(--spacing-m);
padding-right: var(--spacing-l);
padding: var(--spacing-s);
@media (max-width: $breakpoint-small) {
padding: 0;
@ -258,7 +261,7 @@
}
.card__body {
padding: var(--spacing-l);
padding: var(--spacing-m);
&:not(.card__body--no-title) {
padding-top: 0;
@ -275,9 +278,9 @@
}
.card__main-actions {
padding: var(--spacing-l);
padding: var(--spacing-m);
padding-bottom: 0;
margin-bottom: var(--spacing-l);
margin-bottom: var(--spacing-m);
border-top: 1px solid var(--color-border);
&:only-child {
@ -286,7 +289,7 @@
}
.card__body-actions {
padding: var(--spacing-l);
padding: var(--spacing-m);
@media (max-width: $breakpoint-small) {
padding: var(--spacing-s);
@ -339,3 +342,9 @@
margin-right: var(--spacing-m);
}
}
.card__bottom-actions {
display: flex;
justify-content: space-between;
align-items: center;
}

11
ui/scss/component/_channel.scss
View file

@ -103,6 +103,7 @@ $metadata-z-index: 1;
.channel-thumbnail__custom {
width: 100%;
object-fit: cover;
font-size: 1px; // To hide the alt text on firefox;
}
.channel-thumbnail__default {
@ -274,7 +275,8 @@ $metadata-z-index: 1;
&[data-selected] {
background: transparent;
.channel__list-item {
.channel__list-item,
.channel-staked__wrapper {
background-color: var(--color-card-background-highlighted);
}
}
@ -308,6 +310,7 @@ $metadata-z-index: 1;
background-color: var(--color-card-background);
padding: var(--spacing-s);
border-bottom: 1px solid var(--color-border);
overflow: hidden;
.channel-thumbnail {
height: 2rem;
@ -356,16 +359,12 @@ $metadata-z-index: 1;
.channel-staked__tooltip {
display: flex;
align-items: center;
line-height: 1rem;
}
.channel-staked__tooltip-text {
margin-left: var(--spacing-xs);
font-size: var(--font-xsmall);
.icon--LBC {
opacity: 0.7;
margin-top: -2px;
}
}
.channel-staked__wrapper {

54
ui/scss/component/_claim-list.scss
View file

@ -30,9 +30,11 @@
transform: translateY(-130%);
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
overflow: visible;
.icon {
margin-right: var(--spacing-xs);
stroke: var(--color-text-subtitle);
}
@media (max-width: $breakpoint-small) {
@ -179,6 +181,20 @@
@include handleChannelGif(5rem);
}
}
.claim-preview__text {
height: 7.5rem;
}
@media (max-width: $breakpoint-small) {
.channel-thumbnail {
@include handleChannelGif(6rem);
}
.claim-preview__text {
height: 3.5rem;
}
}
}
.claim-preview--small {
@ -202,12 +218,15 @@
.claim-preview--inline {
.channel-thumbnail {
@include handleChannelGif(var(--channel-thumbnail-width--small));
@include handleChannelGif(3rem);
@media (min-width: $breakpoint-small) {
@include handleChannelGif(var(--channel-thumbnail-width--small));
}
}
.claim-preview__actions {
align-self: flex-end;
margin-top: 0;
margin-bottom: auto;
justify-content: flex-end;
width: auto;
@ -218,11 +237,16 @@
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
@media (max-width: $breakpoint-xsmall) {
.claim-preview__actions {
align-self: flex-start;
.claim-preview__primary-actions {
.button {
margin-top: 0;
}
}
}
}
}
@ -255,10 +279,6 @@
display: flex;
flex-direction: column;
flex: 1;
@media (max-width: $breakpoint-small) {
margin-bottom: var(--spacing-s);
}
}
.claim-preview-info {
@ -276,7 +296,6 @@
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: auto;
width: 100%;
@media (min-width: $breakpoint-small) {
@ -286,7 +305,14 @@
.claim-preview__primary-actions {
@extend .section__actions;
margin-top: 0;
margin-right: 0;
margin-top: var(--spacing-s);
&:first-child {
.button {
margin-top: var(--spacing-s);
}
}
}
.claim-preview__actions--header {
@ -386,6 +412,16 @@
font-size: var(--font-large);
}
.claim-grid__title--first {
text-align: center;
width: 100%;
margin-bottom: var(--spacing-l);
.no-evil {
font-size: var(--font-heading);
}
}
.claim-grid__title--secondary {
margin-left: auto;
}

14
ui/scss/component/_comments.scss
View file

@ -33,6 +33,10 @@ $thumbnailWidthSmall: 1rem;
position: relative;
}
.comment__create--bottom {
padding-bottom: 0;
}
.comment {
display: flex;
flex-direction: column;
@ -60,6 +64,12 @@ $thumbnailWidthSmall: 1rem;
margin-left: 0;
}
}
.channel-staked__indicator {
@media (max-width: $breakpoint-small) {
margin-left: 0.1rem;
}
}
}
}
@ -281,6 +291,10 @@ $thumbnailWidthSmall: 1rem;
padding-bottom: var(--spacing-xs);
font-size: var(--font-small);
border-bottom: 1px solid var(--color-border);
&:not(:last-child) {
margin-bottom: var(--spacing-xs);
}
}
.comment__menu-help {

1
ui/scss/component/_file-properties.scss
View file

@ -25,6 +25,7 @@
font-size: var(--font-xsmall);
line-height: 1.2;
margin-left: 0;
margin-top: auto;
position: relative;
.tag {

34
ui/scss/component/_file-render.scss
View file

@ -5,11 +5,11 @@
.card + .file-render,
.card + .file-page__video-container,
.card + .content__cover {
margin-top: var(--spacing-l);
margin-top: var(--spacing-m);
}
.card + .file-render {
margin-top: var(--spacing-l);
margin-top: var(--spacing-m);
}
.file-page__md {
@ -203,13 +203,28 @@
}
.file-viewer__overlay-logo {
color: var(--color-white);
font-weight: bold;
height: 3.5rem;
width: 12rem;
display: flex;
align-items: center;
.icon {
height: 30px;
stroke-width: 5px;
&:hover {
filter: drop-shadow(1px 2px 10px var(--color-gray-3));
}
@media (max-width: $breakpoint-small) {
margin-right: var(--spacing-m);
width: 2.5rem;
.button__label {
display: none;
}
}
}
.file-viewer__overlay-logo--videoend {
height: 3.5rem;
width: 12rem;
}
.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
@ -219,11 +234,15 @@
.file-viewer__embedded-header {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
top: 0;
opacity: 1;
z-index: 2;
height: 4rem;
padding-left: var(--spacing-m);
padding-right: var(--spacing-s);
font-size: var(--font-large);
overflow-x: hidden;
overflow-y: hidden;
@ -233,7 +252,6 @@
border-top-right-radius: var(--border-radius);
.button {
padding: var(--spacing-s);
color: var(--color-white);
z-index: 2;

35
ui/scss/component/_footer.scss
View file

@ -1,7 +1,8 @@
.footer {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 80%;
align-items: center;
margin: auto;
padding: var(--spacing-xl);
font-size: var(--font-small);
@ -9,10 +10,39 @@
@media (max-width: $breakpoint-small) {
max-width: 100%;
padding: var(--spacing-m);
flex-direction: column;
align-items: flex-start;
}
}
.footer__links {
display: flex;
flex-direction: column;
.navigation-link {
font-size: var(--font-small);
}
.button__label {
color: var(--color-text-help);
}
.footer__link {
margin-left: 0;
}
@media (min-width: $breakpoint-small) {
flex-direction: row;
.footer__link {
margin-left: var(--spacing-m);
}
}
}
.footer__link {
margin-bottom: var(--spacing-s);
}
.footer__section {
margin-left: var(--spacing-xl);
@ -23,7 +53,6 @@
.footer__section-title {
@extend .help;
font-weight: 300;
margin-bottom: var(--spacing-m);
}

4
ui/scss/component/_form-field.scss
View file

@ -214,6 +214,7 @@ input-submit {
border-left: 2px solid;
border-bottom: 2px solid;
border-color: var(--color-input-toggle);
border-left-color: var(--color-input-toggle);
transform: rotate(-45deg);
left: 6px;
top: 6px;
@ -240,7 +241,7 @@ input-submit {
height: 12px;
width: 12px;
border-radius: 50%;
background-color: var(--color-secondary);
background-color: var(--color-primary);
left: 6px;
top: 5px;
}
@ -356,7 +357,6 @@ fieldset-group {
text-overflow: ellipsis;
overflow: hidden;
padding: 0.5rem;
padding-right: var(--spacing-s);
height: var(--height-input);
border: 1px solid;
border-top-left-radius: var(--border-radius);

25
ui/scss/component/_header.scss
View file

@ -16,7 +16,7 @@
.header--minimal {
box-shadow: none;
background-color: transparent;
background-color: var(--color-background);
border-bottom: none;
}
@ -58,7 +58,6 @@
justify-content: center;
align-items: center;
border-radius: var(--border-radius);
color: var(--color-text);
position: relative;
font-weight: var(--font-weight-bold);
@ -135,11 +134,25 @@
}
.header__navigation-item--lbry {
padding: var(--spacing-s);
height: 4rem;
display: flex;
align-items: center;
margin-left: var(--spacing-m);
margin-right: var(--spacing-m);
.lbry-icon {
height: var(--height-button);
width: var(--height-button);
@media (max-width: $breakpoint-small) {
margin-right: var(--spacing-m);
height: 5rem;
.button__label {
display: none;
}
}
}
.header--minimal {
.header__navigation-item--lbry {
height: 3rem;
}
}

14
ui/scss/component/_icon.scss
View file

@ -66,3 +66,17 @@
.icon__lbc--title {
margin-bottom: 4px;
}
.icon--Fire {
position: relative;
&:after {
content: '';
height: 20px;
width: 20px;
background-color: red;
top: 0;
right: 0;
position: absolute;
}
}

2
ui/scss/component/_main.scss
View file

@ -113,6 +113,7 @@
@media (max-width: $breakpoint-small) {
margin-left: 0;
margin-top: var(--spacing-s);
}
@media (max-width: $breakpoint-medium) {
@ -139,6 +140,7 @@
padding-right: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: 100vw;
max-width: none;

2
ui/scss/component/_markdown-preview.scss
View file

@ -258,7 +258,7 @@
}
.file-viewer__embedded-header {
padding: 0;
padding: var(--spacing-xxs);
}
}

13
ui/scss/component/_media.scss
View file

@ -39,12 +39,6 @@
align-self: flex-start;
color: var(--color-text-subtitle);
font-size: var(--font-small);
.channel-thumbnail {
display: inline-block;
@include handleChannelGif(1rem);
margin-right: var(--spacing-xs);
}
}
.media__subtitle--centered {
@ -115,7 +109,6 @@
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 0;
> *:not(:last-child) {
@ -123,7 +116,6 @@
}
@media (max-width: $breakpoint-small) {
justify-content: flex-start;
padding-top: var(--spacing-s);
> * {
@ -138,4 +130,9 @@
font-size: var(--font-xxsmall);
display: flex;
flex-direction: column;
margin-bottom: var(--spacing-s);
&:not(:last-child) {
margin-bottom: var(--spacing-s);
}
}

20
ui/scss/component/_navigation.scss
View file

@ -26,7 +26,10 @@
height: calc(100vh - var(--header-height));
border-right: 1px solid var(--color-border);
padding-top: var(--spacing-l);
padding-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-l);
overflow-y: auto;
display: flex;
flex-direction: column;
@media (min-width: $breakpoint-small) {
overflow-y: hidden;
@ -35,6 +38,10 @@
overflow-y: auto;
}
}
@media (min-width: $breakpoint-small) {
justify-content: space-between;
}
}
.navigation--mac {
@ -222,7 +229,16 @@
@extend .navigation-links;
margin-right: 0;
padding-right: 0;
font-size: var(--font-small);
margin-top: var(--spacing-xl);
margin-bottom: 0;
.navigation-link {
font-size: var(--font-small);
}
.button__label {
color: var(--color-text-help);
}
.button__content {
align-items: flex-start;

3
ui/scss/component/_nudge.scss
View file

@ -1,7 +1,7 @@
.nudge {
z-index: 3;
position: absolute;
left: 0;
// left: 5rem;
top: 4rem;
white-space: normal;
overflow: visible;
@ -10,6 +10,7 @@
box-shadow: var(--card-box-shadow);
background-color: var(--color-secondary);
color: var(--color-white);
font-weight: bold;
.button--close {
.icon {

1
ui/scss/component/_purchase.scss
View file

@ -55,6 +55,7 @@
.credit-amount {
margin: 0 var(--spacing-m);
margin-bottom: -0.5rem;
}
&::before {

2
ui/scss/component/_search.scss
View file

@ -15,6 +15,7 @@
color: var(--color-secondary);
margin-bottom: var(--spacing-s);
padding: var(--spacing-xxs);
border-radius: var(--border-radius);
}
fieldset:not(:first-child) {
@ -34,6 +35,7 @@
.search__top-link {
margin-top: var(--spacing-s);
font-weight: var(--font-weight-body);
margin-top: var(--spacing-xs);
}
.search__top-links {

Some files were not shown because too many files have changed in this diff Show more