Stop the player from repeating last track in play queue

app/actions/play-queue/index.js

@@ -46,6 +46,19 @@ export function trashPlayQueue() {
   }
 }
 
+
+export function playQueueEnded() {
+  return {
+    type: types.PLAY_QUEUE_ENDED,
+  }
+}
+
+export function resetPlayQueueEnded() {
+  return {
+    type: types.RESET_PLAY_QUEUE_ENDED,
+  }
+}
+
 export function setCurrentIndex(index) {
   return {
     type: types.SET_CURRENT_INDEX,
@@ -147,7 +160,7 @@ export function incrementCurrentIndex() {
           // play the play queue from the beginning again
           dispatch(setCurrentIndex(0));
         } else {
-          return;
+          dispatch(playQueueEnded())
         }
     } else {
       dispatch({

app/actions/player/index.js

@@ -2,7 +2,8 @@ import * as types from '../../constants/ActionTypes.js';
 import {
   incrementCurrentIndex,
   decrementCurrentIndex,
-  playCurrentIndex
+  playCurrentIndex,
+  resetPlayQueueEnded,
 } from '../play-queue';
 
 export function playVideo(videoData) {
@@ -15,7 +16,11 @@ export function playVideo(videoData) {
 export function trackEnded() {
   return (dispatch, getState) => {
     dispatch(incrementCurrentIndex());
-    dispatch(playCurrentIndex());
+    if (!getState().playQueue.playQueueEnded) {
+      dispatch(playCurrentIndex());
+    } else {
+      dispatch(resetPlayQueueEnded());
+    }
   }
 }
 

app/components/play-queue/index.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classNames';
 import { connect } from 'react-redux';
-import { 
-  playQueueTrackSelected, 
-  removeTrackFromQueue 
+import {
+  playQueueTrackSelected,
+  removeTrackFromQueue
 } from '../../actions/play-queue';
 
 export class PlayQueue extends React.Component {
@@ -18,7 +18,7 @@ export class PlayQueue extends React.Component {
     super();
 
     this.currentScrollTop = 0;
-    
+
     this.state = {
       renderPlayQueue: false,
     };
@@ -30,15 +30,20 @@ export class PlayQueue extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     this.shouldRenderPlayQueue(nextProps);
+    this.savePlayQueueToLocalStorage(nextProps.tracks);
 
     if (
-      this.props.playQueueCurrentIndex !== 
+      this.props.playQueueCurrentIndex !==
       nextProps.playQueueCurrentIndex
     ) {
       this.scrollToCurrentIndex(nextProps);
     }
   }
 
+  savePlayQueueToLocalStorage(tracks) {
+    console.log('new tracks', tracks);
+  }
+
   scrollToCurrentIndex(props) {
     let move;
 
@@ -47,9 +52,9 @@ export class PlayQueue extends React.Component {
     const trackElHeight = trackEl.getBoundingClientRect().height;
     const trackPos = track * trackElHeight;
     const trackPosBottomEdge = trackPos + trackElHeight;
-    const playQueueHeight = this.playQueueWrap.getBoundingClientRect().height;  
+    const playQueueHeight = this.playQueueWrap.getBoundingClientRect().height;
     const scrollTopPos = this.playQueueWrap.scrollTop;
-    
+
     if (trackPosBottomEdge > (playQueueHeight + scrollTopPos)) {
       move = trackPosBottomEdge - (playQueueHeight + scrollTopPos);
       this.playQueueWrap.scrollTop = scrollTopPos + move;
@@ -61,7 +66,7 @@ export class PlayQueue extends React.Component {
 
   shouldRenderPlayQueue(props) {
     let renderPlayQueue;
-    
+
     if (props.tracks && props.tracks.length) {
       renderPlayQueue = true;
     } else {
@@ -80,19 +85,19 @@ export class PlayQueue extends React.Component {
 
   render() {
     if (this.state.renderPlayQueue) {
-      const currentIndex = 
-        this.props.playQueueCurrentIndex ? 
+      const currentIndex =
+        this.props.playQueueCurrentIndex ?
         this.props.playQueueCurrentIndex : 0;
       return (
-        <div 
+        <div
           className="play-queue"
           ref={(playQueueWrap) => this.playQueueWrap = playQueueWrap }
         >
           <ul className="play-queue__list">
             {
               this.props.tracks.map((track, i) => {
-                const selected = currentIndex === i ? 
-                  'play-queue__list-item--selected' : 
+                const selected = currentIndex === i ?
+                  'play-queue__list-item--selected' :
                   null;
 
                 const classes = classNames(
@@ -111,7 +116,7 @@ export class PlayQueue extends React.Component {
                     <span className="play-queue__track">
                       {track.name}
                     </span>
-                    <span 
+                    <span
                       onClick={
                         (event) => {
                           this.onRemoveTrackFromQueue(event, i)

app/components/youtube-player/styles.scss

@@ -2,7 +2,7 @@
   background: #282727;
   position: relative;
   z-index: 1;
-  
+
   &__player {
     display: block;
     width: 320px;
@@ -40,6 +40,7 @@
   }
 
   &__progress-bar {
+    overflow: hidden;
     position: absolute;
     height: 4px;
     background: #444;

app/constants/ActionTypes.js

@@ -67,3 +67,5 @@ export const PLAYLIST_UPDATE_ERROR = 'PLAYLIST_UPDATE_ERROR';
 export const RECEIVE_TOP_TRACK_DATA = 'RECEIVE_TOP_TRACK_DATA';
 export const TOP_TRACK_DATA_ERROR = 'TOP_TRACK_DATA_ERROR';
 export const PAUSE_BY_SPACEBAR = 'PAUSE_BY_SPACEBAR';
+export const PLAY_QUEUE_ENDED = 'PLAY_QUEUE_ENDED';
+export const RESET_PLAY_QUEUE_ENDED = 'RESET_PLAY_QUEUE_ENDED';

app/reducers/play-queue/index.js

@@ -66,11 +66,22 @@ export function savePlaylistPopupVisible(state = false, action) {
   }
 }
 
+export function playQueueEnded(state = false, action) {
+  switch(action.type) {
+    case types.PLAY_QUEUE_ENDED:
+      return true;
+    case types.RESET_PLAY_QUEUE_ENDED:
+      return false;
+    default:
+      return state;
+  }
+}
 
 export const playQueue = combineReducers({
   playQueueTracks,
   playQueueCurrentIndex,
   shuffle,
   repeat,
   savePlaylistPopupVisible,
+  playQueueEnded
 });