StreamInfo component - allow selecting new stream

packages/app/app/components/PlayQueue/QueuePopup/index.tsx

@@ -12,36 +12,29 @@ import * as QueueActions from '../../../actions/queue';
 import styles from './styles.scss';
 import { PluginsState } from '../../../reducers/plugins';
 
-
 type QueuePopupProps = {
-trigger: React.ReactNode;
-isQueueItemCompact: boolean;
+  trigger: React.ReactNode;
+  isQueueItemCompact: boolean;
 
-idLabel: string;
-titleLabel: string;
-copyTrackUrlLabel: string;
-sourceLabel: string;
+  copyTrackUrlLabel: string;
 
-track: QueueItem;
-index: number;
+  track: QueueItem;
+  index: number;
 
-actions: typeof QueueActions;
-plugins: PluginsState;
-copyToClipboard: (text: string) => void;
+  actions: typeof QueueActions;
+  plugins: PluginsState;
+  copyToClipboard: (text: string) => void;
+  onSelectStream: (stream: StreamData) => void;
 }
 
 export const QueuePopup: React.FC<QueuePopupProps> = ({
   trigger,
   isQueueItemCompact,
-  idLabel,
-  titleLabel,
   copyTrackUrlLabel,
-  sourceLabel,
   track,
   index,
-  actions,
-  plugins,
-  copyToClipboard
+  copyToClipboard,
+  onSelectStream
 }) => {
   const triggerElement = useRef(null);
 
@@ -93,10 +86,12 @@ export const QueuePopup: React.FC<QueuePopupProps> = ({
     >
       <StreamInfo
         copyTrackUrlLabel={copyTrackUrlLabel}
+        streams={track.streams as StreamData[]}
         selectedStream={selectedStream}
         thumbnail={track.thumbnail}
         onImageLoaded={handleImageLoaded}
         onCopyTrackUrl={handleCopyTrackUrl}
+        onSelectStream={onSelectStream}
       />
       <hr />
       <div className={styles.queue_popup_buttons_container}>

packages/app/app/components/PlayQueue/index.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Icon } from 'semantic-ui-react';
 
 import { Playlist } from '@nuclear/core';
+import { StreamData } from '@nuclear/core/src/plugins/plugins.types';
 import { formatDuration, QueueItem } from '@nuclear/ui';
 
 import { PluginsState } from '../../reducers/plugins';
@@ -31,6 +32,7 @@ const PlayQueue: React.FC<PlayQueueProps> = ({
     queueDrop,
     repositionSong,
     addToDownloads,
+    updateQueueItem,
     info,
     success,
     selectSong,
@@ -104,6 +106,12 @@ const PlayQueue: React.FC<PlayQueueProps> = ({
     );
   };
 
+  // When a new stream is selected from the stream info component
+  const onSelectStream = (track: QueueItemType) => (stream: StreamData) => {
+    // eslint-disable-next-line no-console
+    console.log({track, stream});
+  };
+
   const renderQueueItems = () => {
     if (!queue.queueItems) {
       return null;
@@ -146,10 +154,8 @@ const PlayQueue: React.FC<PlayQueueProps> = ({
                 isQueueItemCompact={settings.compactQueueBar}
                 index={i}
                 track={item}
-                titleLabel={t('title')}
-                idLabel={t('id')}
                 copyTrackUrlLabel={t('copy-track-url')}
-                sourceLabel={t('source')}
+                onSelectStream={onSelectStream(item)}
               />
             </div>
           )}

packages/i18n/src/locales/en.json

@@ -211,14 +211,11 @@
     "favorite-add": "Add to favorites",
     "header": "Queue",
     "header-track": "Current track",
-    "id": "Stream ID:",
-    "source": "Source:",
     "copy-track-url": "Copy track url to clipboard",
     "loading": "Stream still loading.",
     "playlist-add": "Add to playlist",
     "playlist-toast-content": "Playlist {{name}} has been created.",
     "playlist-toast-title": "Playlist created",
-    "title": "Title:",
     "live": "Live"
   },
   "search": {

packages/ui/lib/components/Dropdown/styles.scss

@@ -32,8 +32,14 @@
     color: $white;
   }
 
-  .text, input {
-    color: $white;
+  .text.divider {
+    color: $white !important;
+  }
+
+  .text:not(.divider),
+  input {
+    color: $white !important;
+    line-height: 1.25;
   }
 
   .menu {

packages/ui/lib/components/StreamInfo/index.tsx

@@ -7,26 +7,34 @@ import Tooltip from '../Tooltip';
 
 import styles from './styles.scss';
 import Button from '../Button';
+import { Dropdown } from '../..';
 
 type Handlers = {
   onImageLoaded: React.ReactEventHandler<HTMLImageElement>;
   onCopyTrackUrl: () => void;
+  onSelectStream: (stream: StreamData) => void;
 }
 
 type StreamInfoProps = {
+  streams: StreamData[];
   selectedStream: StreamData;
   thumbnail?: string;
   copyTrackUrlLabel: string;
 }
 
-const StreamInfo = (props: StreamInfoProps & Handlers) => {
-  const { 
-    selectedStream,
-    onImageLoaded,
-    onCopyTrackUrl,
-    thumbnail,
-    copyTrackUrlLabel
-  } = props;
+const StreamInfo: React.FC<StreamInfoProps & Handlers> =({
+  streams,
+  selectedStream,
+  onSelectStream,
+  onImageLoaded,
+  onCopyTrackUrl,
+  thumbnail,
+  copyTrackUrlLabel
+}) => {
+  const options = streams.map(stream => ({
+    text: stream.title,
+    value: stream.id
+  }));
 
   return (
     <>
@@ -40,9 +48,14 @@ const StreamInfo = (props: StreamInfoProps & Handlers) => {
           />
         </div>
         <div className={styles.stream_text_info}>
-          <div className={styles.stream_title}>
-            {selectedStream?.title}
-          </div>
+          <Dropdown
+            className={styles.stream_title}
+            search
+            selection
+            options={options}
+            defaultValue={selectedStream?.id}
+            onChange={(e, { value }) => onSelectStream(streams.find(stream => stream.id === value))}
+          />
           <div className={styles.stream_author}>
             {selectedStream?.author?.name}
           </div>

packages/ui/lib/components/StreamInfo/styles.scss

@@ -45,11 +45,16 @@
   }
 
   .stream_title {
+    min-width: 0 !important;
+    margin-bottom: 0.5rem;
+  }
+
+  .stream_title div {
     @include ellipsis;
     position: relative;
     display: block;
     font-weight: bold;
-    margin-bottom: 0.5rem;
+    max-width: 100%;
   }
 
   .stream_author {

packages/ui/stories/components/streamInfo.stories.tsx

@@ -10,6 +10,19 @@ export default {
 
 
 const commonProps = {
+  streams: [{
+    title: 'Stream 1',
+    id: 'stream1'
+  }, {
+    title: 'Stream 2',
+    id: 'stream2'
+  }, {
+    title: 'Stream 3',
+    id: 'stream3'
+  }, {
+    title: 'The Weeknd - Blinding Lights (Official Music Video)',
+    id: 'abcdefghijklmnopqrst1234567890'
+  }] as StreamData[],
   selectedStream: {
     thumbnail: 'https://i.imgur.com/4euOws2.jpg',
     source: 'Youtube',
@@ -21,6 +34,7 @@ const commonProps = {
   } as StreamData,
   onImageLoaded: () => {},
   onCopyTrackUrl: () => {},
+  onSelectStream: () => {},
   copyTrackUrlLabel: 'Copy track url'
 };