rt/wrolpi
1
0
Fork 0
mirror of https://github.com/lrnselfreliance/wrolpi.git synced 2026-10-26 19:01:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Hiding channels with low video count on Channels page. All channels can be viewed using Show More/Less button.

Browse source
This commit is contained in:
Roland 2023-11-02 16:04:36 -06:00
parent f9f71fa908
commit 8ff34f5822
No known key found for this signature in database
GPG key ID: 9D6DBD3ACF11AB93
1 changed files with 20 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/src/components/Channels.js
View file

@ -502,6 +502,9 @@ export function ChannelsPage() {
const {channels} = useChannels();
const [searchStr, setSearchStr] = useOneQuery('name');
// Hides Channels with few videos.
const [hideSmall, setHideSmall] = React.useState(true);
const enoughChannelsToHideSmall = channels && channels.length > 10;
const header = <div style={{marginBottom: '1em'}}>
<Grid stackable columns={2}>
@ -559,6 +562,11 @@ export function ChannelsPage() {
if (searchStr && Array.isArray(channels)) {
const re = new RegExp(_.escapeRegExp(searchStr), 'i');
filteredChannels = channels.filter(i => re.test(i['name']));
} else if (channels && hideSmall && enoughChannelsToHideSmall) {
filteredChannels = channels.filter(i =>
i['video_count'] > 5 // Channels need to have at least 5 videos.
|| i['name'].toLowerCase() === 'wrolpi' // Always show the WROLPi channel so users can find tutorials.
);
}
return <>
@ -583,5 +591,17 @@ export function ChannelsPage() {
rowFunc={(i, sortData) => <ChannelRow key={i.id} channel={i} sortData={sortData}/>}
/>
</Media>
<Grid textAlign='center'>
<Grid.Row>
<Grid.Column>
<Button
style={{marginTop: '1em'}}
onClick={() => setHideSmall(!hideSmall)}
size='big'
disabled={!enoughChannelsToHideSmall}
>Show {hideSmall ? 'More' : 'Less'}</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</>
}