Handle non playable items in playlists.

ui/component/claimMenuList/view.jsx

@@ -340,9 +340,9 @@ function ClaimMenuList(props: Props) {
               )}
             </>
           ) : (
-            isPlayable && (
             <>
               {/* WATCH LATER */}
+              {isPlayable && (
                 <MenuItem
                   className="comment__menu-option"
                   onSelect={() => handleAdd(hasClaimInWatchLater, __('Watch Later'), COLLECTIONS_CONSTS.WATCH_LATER_ID)}
@@ -352,6 +352,7 @@ function ClaimMenuList(props: Props) {
                     {hasClaimInWatchLater ? __('In Watch Later') : __('Watch Later')}
                   </div>
                 </MenuItem>
+              )}
               {/* FAVORITES LIST */}
               <MenuItem
                 className="comment__menu-option"
@@ -390,7 +391,6 @@ function ClaimMenuList(props: Props) {
               )}
               <hr className="menu__separator" />
             </>
-            )
           )}
         </>
         {!isChannelPage && (

ui/component/viewers/videoViewer/index.js

@@ -34,12 +34,38 @@ const select = (state, props) => {
   const playingUri = selectPlayingUri(state);
   const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId);
   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 previousListUri;
   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 {
     const recommendedContent = selectRecommendedContentForUri(state, uri);
     nextRecommendedUri = recommendedContent && recommendedContent[0];