// @flow import React from 'react'; import CollectionPreviewTile from 'component/collectionPreviewTile'; import ClaimList from 'component/claimList'; import Button from 'component/button'; import { COLLECTIONS_CONSTS } from 'lbry-redux'; import Icon from 'component/common/icon'; import * as ICONS from 'constants/icons'; import * as PAGES from 'constants/pages'; import Yrbl from 'component/yrbl'; import usePersistedState from 'effects/use-persisted-state'; import Card from 'component/common/card'; type Props = { builtinCollections: CollectionGroup, publishedCollections: CollectionGroup, publishedPlaylists: CollectionGroup, unpublishedCollections: CollectionGroup, // savedCollections: CollectionGroup, }; export default function CollectionsListMine(props: Props) { const { builtinCollections, publishedPlaylists, unpublishedCollections, // savedCollections, these are resolved on startup from sync'd claimIds or urls } = props; const builtinCollectionsList = (Object.values(builtinCollections || {}): any); const unpublishedCollectionsList = (Object.keys(unpublishedCollections || {}): any); const publishedList = (Object.keys(publishedPlaylists || {}): any); const hasCollections = unpublishedCollectionsList.length || publishedList.length; const watchLater = builtinCollectionsList.find((list) => list.id === COLLECTIONS_CONSTS.WATCH_LATER_ID); const favorites = builtinCollectionsList.find((list) => list.id === COLLECTIONS_CONSTS.FAVORITES_ID); const builtin = [watchLater, favorites]; const [showHelp, setShowHelp] = usePersistedState('livestream-help-seen', true); const helpText = (

{__(`Thanks for checking out our new lists feature!`)}

{__(`From content pages or content preview menus, you can add content to lists or add new lists.`)}

{__( `Right now lists are for playable content only, but soon you can make lists of lists of lists of lists! Listception!` )}

{__(`Keep a list private, or publish it (transaction fees and bidding apply).`)}

); return ( <> {builtin.map((list: Collection) => { const { items: itemUrls } = list; return (
<> {Boolean(itemUrls && itemUrls.length) && ( <>

)} {!(itemUrls && itemUrls.length) && (

{__('%collection_name%', { collection_name: list.name })}{' '}
(Empty)

)}
); })}

{__('Playlists')} {!hasCollections &&
(Empty)
}

{showHelp && ( setShowHelp(false)} />} title={__('Introducing Lists')} actions={helpText} /> )} {Boolean(hasCollections) && (
{unpublishedCollectionsList && unpublishedCollectionsList.length > 0 && unpublishedCollectionsList.map((key) => ( ))} {publishedList && publishedList.length > 0 && publishedList.map((key) => )}
)} {!hasCollections && (
//
// } />
)} ); }