it could be fixed to the bottom of the viewport for mobile.

The "Play" button could be a triangle play icon
The "Add to Queue" button could be a plus sign

use material-ui icons

allow the current queue to be rearranged using drag and drop events

music should continue when phone screen is off or in another app

when a user visits the web app, they should see a loading screen until everything in the page is finished loading

allow a queue item to be removed by clicking an icon button in the queue item

iam confused on where to set api key for you tube data api

heres the log

9 verbose lifecycle [email protected]~start: CWD: C:\Users\manthan\repos\Artistify
10 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'node index.js' ]
11 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] start: `node index.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\manthan\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:310:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\manthan\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:310:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\manthan\repos\Artistify
16 verbose Windows_NT 6.1.7601
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\manthan\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.16.3
19 verbose npm  v6.14.5
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: `node index.js`
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Footer

Error: Cannot find module 'yt-search'

detect whether the user has indicated they prefer dark mode and set the darkMode statue default in App.js accordingly

This major feature is a set of these individual features:

• save current queue in memory as a playlist
• view list of playlists currently stored
• load a playlist into active queue

so add a counter in the appbar that will display the people that are using the app

Keep que active with all songs as the user mover through the playlist. Highlight active que item, only remove que items at users request.

Giving someone an invite (can be a link) and both will be listening to the queue. If someone changes the song, the song will change for both.

The mysql NPM package has this covered:
https://www.npmjs.com/package/mysql#escaping-query-values

the icon button should have a badge that displays the number of songs currently in the queue

right now, when the search results is empty

it could be some sort of background image, or results of the top 20 music,

something like that

add button to video search result card that display extra information about the video

the information should include the artist, full title, duration, anything other relative data we're getting in the response

details could pop up in a little modal or popover or something like that

this will allow users to learn more about a video search result before playing it or adding it to the queue

currently, the meta tag for image is not showing up when the link is posted in discord

this is because it is a .svg, but needs to be a .png

the meta tag for the image is found in /public/index.html
the image can be placed in /public/

currently, clicking any card in the queue will play the next in queue

instead, we want it to play the song in the queue that was clicked

sometimes when we try to play something through the youtube player we get a "this video is unavailable for being embedded or whatever"

lets see if it's possible to identify these videos and not display them in the search results

place a share button in the app bar that copies the current url

The big "ARTISTIFY" in the middle of the video grid component when there are no videos currently shown is messing up the mobile view because it is wider than the container it's in.

restrict it to 100%. this css should work: max-width:100%

as always feel free to reach out to me for help completing this

currently, you can re order a queue only by the "drag and drop" feature, which is at the moment a bit inconsistant

lets give the users tiny arrow buttons they can use when the drag and drop fails

currently, the queue is reorderable by draggins and dropping, but this is not immediately apparent.
we need to communicate this to user somehow

one option is to have muted but somewhat prominent text reading "Drag and drop queue items to reorder" or something like that

another option would be to use some sort of symbol or other visual que to show the queue cards are draggable.

CURRENT BEHAVIOUR: when a song ends while the user is in a different tab, the next song will not play until the user returns to the tab

DESIRED BEHAVIOUR: when a song ends while the user is in a different tab, the next song will play

the app bar is getting cluttered, we should move several elements to menu that opens up

meta tags are found in the head of public/index.html

title should be "Artistify" or come from the frontend/.env file
description should be "For your lovely earholes" or come from the frontend/.env
image should be the image at public/icon-logo.svg

reordering the queue doesn't work in mobile, because we are using html5 drag and drop backend

we need to use touch backend instead when user is on mobile

currently we have no way of identifying user's device so we'll need that

then change the provider in /frontend/src/components/QueueSection.js depnding on user device

dnd touch backend provider: https://react-dnd.github.io/react-dnd/docs/backends/touch

set up the root package.json to be able to build the existing frontentend in /public into a desktop application

Currently, all react components for this project are together in the frontend/src/components directory

The components should be arranged and grouped into larger components.

We need to do some brain storming or looking at other projects to find a good pattern for organizing these components

in /search/service.js

do something like this: https://medium.com/the-node-js-collection/simple-server-side-cache-for-express-js-with-node-js-45ff296ca0f0

favicon should be our brand icon

The mobile view of the app bar is currently jacked up.

That is because it's just a flexbox that will always be a single row.

This could be fixed be replacing the Toolbar component with a Grid and setting proper breakpoints for each Grid item

music should be still playing when the video ended, random music videos.