Fix crash on deleting queue items

Hawkings296 · Oct 1, 2019 · e0b9e35 · e0b9e35
1 parent 81de3d1
commit e0b9e35
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/packages/app/app/components/PlayQueue/index.js b/packages/app/app/components/PlayQueue/index.js
@@ -59,8 +59,8 @@ class PlayQueue extends React.Component {
                   <QueueItem
                     index={i}
                     track={el}
-                    loading={el.loading}
-                    current={this.props.currentSong === i}
+                    isLoading={el.loading}
+                    isCurrent={this.props.currentSong === i}
                     defaultMusicSource={this.props.plugins.defaultMusicSource}
                     selectSong={this.props.actions.selectSong}
                     removeFromQueue={this.props.actions.removeFromQueue}

diff --git a/packages/ui/lib/components/QueueItem/index.js b/packages/ui/lib/components/QueueItem/index.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { Icon } from 'semantic-ui-react';
+import { compose, withHandlers } from 'recompose';
 
 import Loader from '../Loader';
 import common from '../../common.scss';
@@ -10,11 +12,11 @@ const QueueItem = props => {
   let {
     isLoading,
     isCurrent,
-    index,
     track,
     duration,
-    selectSong,
-    removeFromQueue
+
+    handleRemoveFromQueue,
+    handleSelectSong
   } = props;
 
   return (
@@ -24,7 +26,7 @@ const QueueItem = props => {
         styles.queue_item,
         {[`${styles.current_song}`]: isCurrent}
       )}
-      onDoubleClick={() => selectSong(index)}
+      onDoubleClick={handleSelectSong}
     >
       <div className={styles.thumbnail}>
         {
@@ -35,9 +37,9 @@ const QueueItem = props => {
 
         <div
           className={styles.thumbnail_overlay}
-          onClick={() => removeFromQueue(index)}
+          onClick={handleRemoveFromQueue}
         >
-          <i className='bx bx-trash bx-sm' />
+          <Icon name='trash alternate outline' size='big' />
         </div>
       </div>
 
@@ -73,4 +75,9 @@ QueueItem.propTypes = {
   removeFromQueue: PropTypes.func
 };
 
-export default QueueItem;
+export default compose(
+  withHandlers({
+    handleRemoveFromQueue: ({removeFromQueue, track}) => () => removeFromQueue(track),
+    handleSelectSong: ({selectSong, index}) => () => selectSong(index)
+  })
+)(QueueItem);
diff --git a/packages/ui/lib/components/QueueItem/styles.scss b/packages/ui/lib/components/QueueItem/styles.scss
@@ -3,7 +3,7 @@
 .queue_item {
   @include transition;
   @include roundCorners;
-  
+
   display: flex;
   flex-flow: row;
   flex: 0 0 auto;
@@ -28,7 +28,7 @@
     @include center;
     @include circle;
     @include transition;
-    
+
     position: absolute;
     display: flex;
     top: 0;
@@ -43,12 +43,16 @@
     &:hover {
       opacity: 0.85;
     }
+
+    i {
+      margin: 0;
+    }
   }
 }
 
 .item_info_container {
   @include ellipsis;
-  
+
   display: flex;
   margin: 0.25em;
   flex: 1 1 auto;

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -60,7 +60,9 @@
     "classnames": "^2.2.6",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "react-dom": "^16.4.1",
+    "recompose": "^0.30.0",
+    "semantic-ui-react": "^0.88.1"
   },
   "ava": {
     "babel": {