Handle non playable items in playlists.

This commit is contained in:
Franco Montenegro 2022-05-04 19:15:07 -03:00 committed by jessopb
parent 6108860063
commit 8a9af7d354
2 changed files with 64 additions and 38 deletions

View file

@ -340,9 +340,9 @@ function ClaimMenuList(props: Props) {
)} )}
</> </>
) : ( ) : (
isPlayable && ( <>
<> {/* WATCH LATER */}
{/* WATCH LATER */} {isPlayable && (
<MenuItem <MenuItem
className="comment__menu-option" className="comment__menu-option"
onSelect={() => handleAdd(hasClaimInWatchLater, __('Watch Later'), COLLECTIONS_CONSTS.WATCH_LATER_ID)} onSelect={() => handleAdd(hasClaimInWatchLater, __('Watch Later'), COLLECTIONS_CONSTS.WATCH_LATER_ID)}
@ -352,45 +352,45 @@ function ClaimMenuList(props: Props) {
{hasClaimInWatchLater ? __('In Watch Later') : __('Watch Later')} {hasClaimInWatchLater ? __('In Watch Later') : __('Watch Later')}
</div> </div>
</MenuItem> </MenuItem>
{/* FAVORITES LIST */} )}
{/* FAVORITES LIST */}
<MenuItem
className="comment__menu-option"
onSelect={() => handleAdd(hasClaimInFavorites, __('Favorites'), COLLECTIONS_CONSTS.FAVORITES_ID)}
>
<div className="menu__link">
<Icon aria-hidden icon={hasClaimInFavorites ? ICONS.DELETE : ICONS.STAR} />
{hasClaimInFavorites ? __('In Favorites') : __('Favorites')}
</div>
</MenuItem>
{/* CURRENTLY ONLY SUPPORT PLAYLISTS FOR PLAYABLE; LATER DIFFERENT TYPES */}
<MenuItem
className="comment__menu-option"
onSelect={() => openModal(MODALS.COLLECTION_ADD, { uri, type: 'playlist' })}
>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.STACK} />
{__('Add to Lists')}
</div>
</MenuItem>
{lastUsedCollection && lastUsedCollectionIsNotBuiltin && (
<MenuItem <MenuItem
className="comment__menu-option" className="comment__menu-option"
onSelect={() => handleAdd(hasClaimInFavorites, __('Favorites'), COLLECTIONS_CONSTS.FAVORITES_ID)} onSelect={() =>
handleAdd(hasClaimInLastUsedCollection, lastUsedCollection.name, lastUsedCollection.id)
}
> >
<div className="menu__link"> <div className="menu__link">
<Icon aria-hidden icon={hasClaimInFavorites ? ICONS.DELETE : ICONS.STAR} /> {!hasClaimInLastUsedCollection && <Icon aria-hidden icon={ICONS.ADD} />}
{hasClaimInFavorites ? __('In Favorites') : __('Favorites')} {hasClaimInLastUsedCollection && <Icon aria-hidden icon={ICONS.DELETE} />}
{!hasClaimInLastUsedCollection &&
__('Add to %collection%', { collection: lastUsedCollection.name })}
{hasClaimInLastUsedCollection && __('In %collection%', { collection: lastUsedCollection.name })}
</div> </div>
</MenuItem> </MenuItem>
{/* CURRENTLY ONLY SUPPORT PLAYLISTS FOR PLAYABLE; LATER DIFFERENT TYPES */} )}
<MenuItem <hr className="menu__separator" />
className="comment__menu-option" </>
onSelect={() => openModal(MODALS.COLLECTION_ADD, { uri, type: 'playlist' })}
>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.STACK} />
{__('Add to Lists')}
</div>
</MenuItem>
{lastUsedCollection && lastUsedCollectionIsNotBuiltin && (
<MenuItem
className="comment__menu-option"
onSelect={() =>
handleAdd(hasClaimInLastUsedCollection, lastUsedCollection.name, lastUsedCollection.id)
}
>
<div className="menu__link">
{!hasClaimInLastUsedCollection && <Icon aria-hidden icon={ICONS.ADD} />}
{hasClaimInLastUsedCollection && <Icon aria-hidden icon={ICONS.DELETE} />}
{!hasClaimInLastUsedCollection &&
__('Add to %collection%', { collection: lastUsedCollection.name })}
{hasClaimInLastUsedCollection && __('In %collection%', { collection: lastUsedCollection.name })}
</div>
</MenuItem>
)}
<hr className="menu__separator" />
</>
)
)} )}
</> </>
{!isChannelPage && ( {!isChannelPage && (

View file

@ -34,12 +34,38 @@ const select = (state, props) => {
const playingUri = selectPlayingUri(state); const playingUri = selectPlayingUri(state);
const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId); const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId);
const isMarkdownOrComment = playingUri && (playingUri.source === 'markdown' || playingUri.source === 'comment'); const isMarkdownOrComment = playingUri && (playingUri.source === 'markdown' || playingUri.source === 'comment');
const isClaimPlayable = (uri) => {
const claim = makeSelectClaimForUri(uri)(state);
// $FlowFixMe
return (
claim &&
// $FlowFixMe
claim.value &&
// $FlowFixMe
claim.value.stream_type &&
// $FlowFixMe
(claim.value.stream_type === 'audio' || claim.value.stream_type === 'video')
);
};
const nextUriInCollection = (fromUri) => {
return makeSelectNextUrlForCollectionAndUrl(collectionId, fromUri)(state);
};
const prevUriInCollection = (fromUri) => {
return makeSelectPreviousUrlForCollectionAndUrl(collectionId, fromUri)(state);
};
let nextRecommendedUri; let nextRecommendedUri;
let previousListUri; let previousListUri;
if (collectionId) { if (collectionId) {
nextRecommendedUri = makeSelectNextUrlForCollectionAndUrl(collectionId, uri)(state); nextRecommendedUri = uri;
previousListUri = makeSelectPreviousUrlForCollectionAndUrl(collectionId, uri)(state); previousListUri = uri;
// Find previous and next playable item in the collection.
do {
nextRecommendedUri = nextUriInCollection(nextRecommendedUri);
} while (nextRecommendedUri && !isClaimPlayable(nextRecommendedUri));
do {
previousListUri = prevUriInCollection(previousListUri);
} while (previousListUri && !isClaimPlayable(previousListUri));
} else { } else {
const recommendedContent = selectRecommendedContentForUri(state, uri); const recommendedContent = selectRecommendedContentForUri(state, uri);
nextRecommendedUri = recommendedContent && recommendedContent[0]; nextRecommendedUri = recommendedContent && recommendedContent[0];