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

basic search working on channels

Browse source
This commit is contained in:
Sean Yesmunt 2019-09-16 01:32:02 -04:00
parent cde543499c
commit f21087f873
6 changed files with 125 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/ui/page/channel/view.jsx
View file

@ -17,9 +17,13 @@ import ClaimUri from 'component/claimUri';
import * as ICONS from 'constants/icons';
import classnames from 'classnames';
import * as MODALS from 'constants/modal_types';
import { Form, FormField } from 'component/common/form';
import ClaimPreview from 'component/claimPreview';
import Icon from 'component/common/icon';
const PAGE_VIEW_QUERY = `view`;
const ABOUT_PAGE = `about`;
const LIGHTHOUSE_URL = 'https://lighthouse.lbry.com/search';
type Props = {
uri: string,
@ -67,22 +71,47 @@ function ChannelPage(props: Props) {
const [editing, setEditing] = useState(false);
const [thumbPreview, setThumbPreview] = useState(thumbnail);
const [coverPreview, setCoverPreview] = useState(cover);
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState(undefined);
// If a user changes tabs, update the url so it stays on the same page if they refresh.
// We don't want to use links here because we can't animate the tab change and using links
// would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers.
const tabIndex = currentView === ABOUT_PAGE || editing ? 1 : 0;
const onTabChange = newTabIndex => {
function onTabChange(newTabIndex) {
let url = formatLbryUriForWeb(uri);
let search = '?';
if (newTabIndex !== 0) {
search += `${PAGE_VIEW_QUERY}=${ABOUT_PAGE}`;
} else {
setSearchResults(null);
search += `page=${page}`;
}
history.push(`${url}${search}`);
};
}
function handleSearch() {
const fetchUrl = `${LIGHTHOUSE_URL}?s=${encodeURIComponent(searchQuery)}&channel=${encodeURIComponent(
uri.slice('lbry://'.length)
)}`;
fetch(fetchUrl)
.then(res => res.json())
.then(results => {
const urls = results.map(({ name, claimId }) => {
return `lbry://${name}#${claimId}`;
});
setSearchResults(urls);
})
.catch(() => {
setSearchResults(null);
});
}
function handleInputChange(e) {
const { value } = e.target;
setSearchQuery(value);
}
let channelIsBlackListed = false;
@ -96,6 +125,29 @@ function ChannelPage(props: Props) {
<Page>
<div className="card">
<header className="channel-cover">
<div className="channel__quick-actions">
{!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}
{!channelIsMine && (
<Button
button="alt"
icon={ICONS.TIP}
label={__('Tip')}
title={__('Send a tip to this creator')}
onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: false })}
/>
)}
{(channelIsMine || (!channelIsMine && supportOption)) && (
<Button
button="alt"
icon={ICONS.SUPPORT}
label={__('Support')}
title={__('Support this creator')}
onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
/>
)}
{!channelIsBlocked && !channelIsBlackListed && <SubscribeButton uri={permanentUrl} />}
{!isSubscribed && <BlockButton uri={permanentUrl} />}
</div>
{!editing && cover && (
<img
className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
@ -130,34 +182,25 @@ function ChannelPage(props: Props) {
<TabList className="tabs__list--channel-page">
<Tab disabled={editing}>{__('Content')}</Tab>
<Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
<div className="card__actions--inline">
{!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}
{!channelIsMine && (
<Button
button="alt"
icon={ICONS.TIP}
label={__('Tip')}
title={__('Send a tip to this creator')}
onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: false })}
/>
)}
{(channelIsMine || (!channelIsMine && supportOption)) && (
<Button
button="alt"
icon={ICONS.SUPPORT}
label={__('Support')}
title={__('Support this creator')}
onClick={() => openModal(MODALS.SEND_TIP, { uri, channelIsMine, isSupport: true })}
/>
)}
{!channelIsBlocked && !channelIsBlackListed && <SubscribeButton uri={permanentUrl} />}
{!isSubscribed && <BlockButton uri={permanentUrl} />}
</div>
<Form onSubmit={handleSearch} className="wunderbar--channel">
<Icon icon={ICONS.SEARCH} />
<FormField
className="wunderbar__input"
value={searchQuery}
onChange={handleInputChange}
type="text"
placeholder={__('Search')}
/>
</Form>
</TabList>
<TabPanels>
<TabPanel>
<ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
{searchResults ? (
searchResults.map(url => <ClaimPreview key={url} uri={url} />)
) : (
<ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
)}
</TabPanel>
<TabPanel>
{editing ? (

8
src/ui/scss/component/_channel.scss
View file

@ -106,3 +106,11 @@ $metadata-z-index: 1;
.channel__image--blurred {
filter: blur(16px);
}
.channel__quick-actions {
@extend .card__actions;
position: absolute;
top: 0;
right: var(--spacing-medium);
z-index: $metadata-z-index;
}

18
src/ui/scss/component/_form-field.scss
View file

@ -320,3 +320,21 @@ fieldset-section {
.form-field--address {
width: 370px;
}
.form-field--channel-search {
&:not(:last-child) {
margin-bottom: 0;
}
input {
margin-bottom: 0;
&:not(:hover) {
border: 1px solid $lbry-gray-5;
}
&:hover {
border: 1px solid $lbry-white;
}
}
}

8
src/ui/scss/component/_wunderbar.scss
View file

@ -20,9 +20,17 @@
height: 100%;
position: absolute;
z-index: 1;
stroke: $lbry-gray-5;
}
}
.wunderbar--channel {
@extend .wunderbar;
flex: 0;
margin-right: 0;
color: $lbry-black;
}
.wunderbar__active-suggestion {
background-color: lighten($lbry-blue-1, 15%);
color: $lbry-black;

2
static/locales/en.json
View file

@ -702,4 +702,4 @@
"For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.": "For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.",
"This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.": "This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.",
"Show All": "Show All"
}
}

22
static/locales/pl.json
View file

@ -623,5 +623,25 @@
"Find New Tags": "Find New Tags",
"View File": "View File",
"Close": "Close",
"% downloaded": "% downloaded"
"% downloaded": "% downloaded",
"View Tag": "View Tag",
"Nothing here": "Nothing here",
"Publish something and claim this spot!": "Publish something and claim this spot!",
"Publish to": "Publish to",
"Network and Data Settings": "Network and Data Settings",
"Save all viewed content to your downloads directory": "Save all viewed content to your downloads directory",
"Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.": "Paid content and some file types are saved by default. Changing this setting will not affect previously downloaded content.",
"Save hosting data to help the LBRY network": "Save hosting data to help the LBRY network",
"If disabled, LBRY will be very sad and you won't be helping improve the network.": "If disabled, LBRY will be very sad and you won't be helping improve the network.",
"Floating video player": "Floating video player",
"Keep content playing in the corner when navigating to a different page.": "Keep content playing in the corner when navigating to a different page.",
"Blocked Channels": "Blocked Channels",
"blocked": "blocked",
"channels": "channels",
"Manage": "Manage",
"Automatic dark mode": "Automatic dark mode",
"Hide wallet balance in header": "Hide wallet balance in header",
"Max Connections": "Max Connections",
"For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.": "For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.",
"This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared.": "This will clear the application cache. Your wallet will not be affected. Currently, followed tags and blocked channels will be cleared."
}