Tracks context detect common provider; useTimer hook for state-accessible intervals/timers

src/js/components/ContextMenu/ContextMenuItems.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
+import { compact, uniq } from 'lodash';
 import { I18n } from '../../locale';
 import Link from '../Link';
 import Icon from '../Icon';
@@ -38,9 +39,7 @@ import {
   addPinned,
   removePinned,
 } from '../../services/pusher/actions';
-import {
-  titleCase, uriSource,
-} from '../../util/helpers';
+import { uriSource } from '../../util/helpers';
 import { arrayOf } from '../../util/arrays';
 import { encodeUri } from '../../util/format';
 
@@ -55,7 +54,7 @@ const ContextMenuItems = ({
     context,
   } = context_menu;
   const can_edit = context?.can_edit || item?.can_edit;
-  const provider = context?.provider || item?.provider || uriSource(item?.uri);
+  let provider = context?.provider || item?.provider || uriSource(item?.uri);
 
   switch (type) {
     case 'album': {
@@ -157,6 +156,10 @@ const ContextMenuItems = ({
     }
     case 'tracks': {
       const uris = arrayOf('uri', items);
+      if (!provider) {
+        const providers = uniq(items.map((i) => i.provider || uriSource(i.uri)));
+        if (providers.length === 1) provider = providers[0];
+      }
       return (
         <>
           <Play uris={uris} context={context} />

src/js/components/PlaybackControls.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
 import Link from './Link';
 import ProgressSlider from './Fields/ProgressSlider';
 import VolumeControl from './Fields/VolumeControl';
@@ -11,6 +10,7 @@ import LinksSentence from './LinksSentence';
 import Thumbnail from './Thumbnail';
 import Icon from './Icon';
 import { scrollTo } from '../util/helpers';
+import useTimer from '../util/useTimer';
 import { showContextMenu, toggleSidebar } from '../services/ui/actions';
 import * as mopidyActions from '../services/mopidy/actions';
 import { I18n } from '../locale';
@@ -39,15 +39,13 @@ const PlaybackControls = () => {
   const [expanded, setExpanded] = useState();
   const [playbackPosition, setPlaybackPosition] = useState(time_position);
 
-  useEffect(() => {
-    const playbackPositionTimer = setInterval(
-      () => {
-        setPlaybackPosition((prev) => prev + 1000);
-      },
-      1000,
-    );
-    return () => clearInterval(playbackPositionTimer);
-  }, []);
+  useTimer(
+    () => {
+      if (play_state === 'playing') setPlaybackPosition((prev) => prev + 1000);
+    },
+    1000,
+    true,
+  );
 
   useEffect(() => {
     setPlaybackPosition(time_position);

src/js/components/TrackList.js

@@ -145,11 +145,13 @@ const TrackList = ({
     const alreadySelected = selectionIndexByItemIndex(index);
     let items = [];
     if (alreadySelected > -1) {
+      console.debug('ALREADY')
       items = selected;
     } else {
       items = nextSelected(selected, item, index, e);
       setSelected(items);
     }
+    console.debug({ alreadySelected, items })
     items = items.map(({ item: selectedItem }) => selectedItem);
 
     showContextMenu({

src/js/util/useTimer.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+const useInterval = (callback, delay, repeat) => {
+  const savedCallback = useRef();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+
+    const action = (repeat ? setInterval(tick, delay) : setTimeout(tick, delay));
+    return () => (repeat ? clearInterval(action) : clearTimeout(action));
+  }, [delay]);
+};
+
+export default useInterval;

src/scss/components/_playback-controls.scss

@@ -85,34 +85,6 @@
       }
     }
 
-    @include responsive($bp_medium) {
-      .current-track {
-        &__incoming,
-        &__outgoing {
-          animation-duration: .25s;
-          animation-timing-function: ease-in-out;
-          transform: translateX(0);
-        }
-      }
-      &[direction="previous"] {
-        .current-track__incoming {
-          animation-name: slide_from_right;
-        }
-        .current-track__outgoing {
-          animation-name: slide_right;
-        }
-      }
-
-      &[direction="next"] {
-        .current-track__incoming {
-          animation-name: slide_from_left;
-        }
-        .current-track__outgoing {
-          animation-name: slide_left;
-        }
-      }
-    }
-
     .current-track {
       width: 100%;
       display: flex;
@@ -269,11 +241,6 @@
 
       .slider {
         flex-grow: 1;
-        &__track {
-          &__progress {
-            @include animate(0.2s, linear);
-          }
-        }
       }
 
       .time {