Add Shuffle control for Lists

ui/component/autoplayCountdown/index.js

@@ -1,7 +1,10 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri, SETTINGS, COLLECTIONS_CONSTS, makeSelectNextUrlForCollectionAndUrl } from 'lbry-redux';
 import { withRouter } from 'react-router';
-import { makeSelectIsPlayerFloating, makeSelectNextUnplayedRecommended, selectListLoop } from 'redux/selectors/content';
+import {
+  makeSelectIsPlayerFloating,
+  makeSelectNextUnplayedRecommended,
+} from 'redux/selectors/content';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
 import AutoplayCountdown from './view';
@@ -16,12 +19,10 @@ const select = (state, props) => {
   const { search } = location;
   const urlParams = new URLSearchParams(search);
   const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
-  const loopList = selectListLoop(state);
-  const loop = loopList && loopList.collectionId === collectionId && loopList.loop;
 
   let nextRecommendedUri;
   if (collectionId) {
-    nextRecommendedUri = makeSelectNextUrlForCollectionAndUrl(collectionId, props.uri, loop)(state);
+    nextRecommendedUri = makeSelectNextUrlForCollectionAndUrl(collectionId, props.uri)(state);
   } else {
     nextRecommendedUri = makeSelectNextUnplayedRecommended(props.uri)(state);
   }

ui/component/collectionContentSidebar/index.js

@@ -7,8 +7,8 @@ import {
   makeSelectClaimForUri,
   makeSelectClaimIsMine,
 } from 'lbry-redux';
-import { selectPlayingUri, selectListLoop } from 'redux/selectors/content';
-import { doToggleLoopList } from 'redux/actions/content';
+import { selectPlayingUri, selectListLoop, selectListShuffle } from 'redux/selectors/content';
+import { doToggleLoopList, doToggleShuffleList } from 'redux/actions/content';
 
 const select = (state, props) => {
   const playingUri = selectPlayingUri(state);
@@ -17,6 +17,8 @@ const select = (state, props) => {
   const url = claim && claim.permanent_url;
   const loopList = selectListLoop(state);
   const loop = loopList && loopList.collectionId === props.id && loopList.loop;
+  const shuffleList = selectListShuffle(state);
+  const shuffle = shuffleList && shuffleList.collectionId === props.id && shuffleList.newUrls;
 
   return {
     url,
@@ -25,9 +27,11 @@ const select = (state, props) => {
     collectionName: makeSelectNameForCollectionId(props.id)(state),
     isMine: makeSelectClaimIsMine(url)(state),
     loop,
+    shuffle,
   };
 };
 
 export default connect(select, {
   doToggleLoopList,
+  doToggleShuffleList,
 })(CollectionContent);

ui/component/collectionContentSidebar/view.jsx

@@ -16,12 +16,14 @@ type Props = {
   collectionName: string,
   collection: any,
   loop: boolean,
+  shuffle: boolean,
   doToggleLoopList: (string, boolean) => void,
+  doToggleShuffleList: (string, boolean) => void,
   createUnpublishedCollection: (string, Array<any>, ?string) => void,
 };
 
 export default function CollectionContent(props: Props) {
-  const { collectionUrls, collectionName, id, url, loop, doToggleLoopList } = props;
+  const { collectionUrls, collectionName, id, url, loop, shuffle, doToggleLoopList, doToggleShuffleList } = props;
 
   return (
     <Card
@@ -49,6 +51,14 @@ export default function CollectionContent(props: Props) {
               className="button--file-action"
               onClick={() => doToggleLoopList(id, !loop)}
             />
+            <Button
+              button="alt"
+              title="Shuffle"
+              icon={ICONS.SHUFFLE}
+              iconColor={shuffle && 'blue'}
+              className="button--file-action"
+              onClick={() => doToggleShuffleList(id, !shuffle)}
+            />
           </span>
         </>
       }

ui/constants/action_types.js

@@ -101,6 +101,7 @@ export const CLEAR_CONTENT_HISTORY_ALL = 'CLEAR_CONTENT_HISTORY_ALL';
 export const RECOMMENDATION_UPDATED = 'RECOMMENDATION_UPDATED';
 export const RECOMMENDATION_CLICKED = 'RECOMMENDATION_CLICKED';
 export const TOGGLE_LOOP_LIST = 'TOGGLE_LOOP_LIST';
+export const TOGGLE_SHUFFLE_LIST = 'TOGGLE_SHUFFLE_LIST';
 
 // Files
 export const FILE_LIST_STARTED = 'FILE_LIST_STARTED';

ui/redux/actions/content.js

@@ -17,6 +17,7 @@ import {
   makeSelectClaimIsMine,
   makeSelectClaimWasPurchased,
   doToast,
+  makeSelectUrlsForCollectionId,
 } from 'lbry-redux';
 import { makeSelectCostInfoForUri, Lbryio } from 'lbryinc';
 import { makeSelectClientSetting, selectosNotificationsEnabled, selectDaemonSettings } from 'redux/selectors/settings';
@@ -296,3 +297,34 @@ export function doToggleLoopList(collectionId: string, loop: boolean, hideToast:
     }
   };
 }
+
+export function doToggleShuffleList(collectionId: string, shuffle: boolean, hideToast: boolean) {
+  return (dispatch: Dispatch, getState: () => any) => {
+    if (shuffle) {
+      const state = getState();
+      const urls = makeSelectUrlsForCollectionId(collectionId)(state);
+
+      const newUrls = urls
+        .map((item) => ({ item, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({ item }) => item);
+
+      dispatch({
+        type: ACTIONS.TOGGLE_SHUFFLE_LIST,
+        data: { collectionId, newUrls },
+      });
+      if (!hideToast) {
+        dispatch(
+          doToast({
+            message: __('Shuffle is on.'),
+          })
+        );
+      }
+    } else {
+      dispatch({
+        type: ACTIONS.TOGGLE_SHUFFLE_LIST,
+        data: { collectionId, newUrls: false },
+      });
+    }
+  };
+}

ui/redux/reducers/content.js

@@ -37,6 +37,14 @@ reducers[ACTIONS.TOGGLE_LOOP_LIST] = (state, action) =>
     },
   });
 
+reducers[ACTIONS.TOGGLE_SHUFFLE_LIST] = (state, action) =>
+  Object.assign({}, state, {
+    shuffleList: {
+      collectionId: action.data.collectionId,
+      newUrls: action.data.newUrls,
+    },
+  });
+
 reducers[ACTIONS.SET_CONTENT_POSITION] = (state, action) => {
   const { claimId, outpoint, position } = action.data;
   return {

ui/redux/selectors/content.js

@@ -30,6 +30,7 @@ export const selectPlayingUri = createSelector(selectState, (state) => state.pla
 export const selectPrimaryUri = createSelector(selectState, (state) => state.primaryUri);
 
 export const selectListLoop = createSelector(selectState, (state) => state.loopList);
+export const selectListShuffle = createSelector(selectState, (state) => state.shuffleList);
 
 export const makeSelectIsPlaying = (uri: string) =>
   createSelector(selectPrimaryUri, (primaryUri) => primaryUri === uri);