tylerjdev/dj-with-friends

A way to 'DJ' with friends. Listen with friends, family or fellow music lovers across the web! 🎵

Hello Friend, my name is Tyler! 🌇

I'm a Web Developer, I specialize mostly in the front-end & making accessible applications.

About Me 📖

I love building and learning, it's a part of the reason why I'm a web developer. With the vastness that is web development, I enjoy trying out new things which may improve my workflow, or to get a better perspective. Things like making sure something is accessible for all is always key when I'm building for the web.

Currently Working On 🚧

• DJ With Friends
• YouTube Timestamps

Blog Posts ✍🏽

• The difference between aria-label, aria-labelledby and aria-describedby
• When role="button" is not enough
• Partial links are inaccessible

Upcoming Posts

1. How accessible are emojis?
2. Let's build an accessible modal in React!

Me Around the Web 🛬

1. Website: trjones.dev
2. LinkedIn: Tyler Jones
3. CodePen: TylerJDev

dj-with-friends's Issues

Implement proper testing

Add proper unit tests to code base
Currently, TDD isn't implemented in this project. TDD should be implemented as soon as possible, fixing the current tests (if failing). Focus should be on unit testing before integration. Also, code base needs to lay down the groundwork for E2E testing.

Implement TDD
Fix any and all issues currently faced with current tests. Focus should be placed on testing any features which do not currently have tests provided.

CI/CD
The tests provided will be the "forefront" before any code hits production. This is the main speed bump, so tests should provide plenty of context on how the code runs in production.

[Room] Grab User instead of UserID

I'm currently grabbing the userID, where I should be grabbing the user itself.

Both userID and user are being stored within the store. I should remove my dependency off of userID for front-facing code, and replace it with "User".

Note
With this, there may be duplicate user(s), whereas there may not be duplicate userID(s). I should ensure that this issue is handled should it arise.

Redesign homepage, about page

I need to redesign the homepage. Currently, you cannot tell much about the website from the home page alone. This should not be the case, a user should be able to gather vital information of the website before continuing. This is increasingly important as there will soon be support for making your own account.

Validate Album Images

I should validate the album image source URLs before I ship them back to the clients connected to the server.

I could add a helper function which grabs the "ID" of the image from the link as highlighted in bold, i.e:

https://i.scdn.co/image/**ca02625b4130d1ed5b7eaff215ab54c42db0c14a**

Then add that alongside a prefix of the rest of the URL:

https://i.scdn.co/image/.

[Room] Add tests for components

Add tests for the following:

• Login handling/authentication
• Lobby page rendering
• Room & component testing
  • Notification Panel
  • User Panel
  • Current Playing
  • Side Panel
  • Room footer content

The types of test may vary. I should implement a process so that I can focus solely on TDD, as this would cut down on the downtime between developing and creating new tests.

Make fully responsive for mobile

Website is currently not fully responsive
I should work on ensuring the responsiveness of this website. Some pages are better than others when it comes to mobile sizes. The following pages need the most improvement.

1. Room Page
2. Lobby Page
3. Modals

Testing
Manual testing should be done when it comes to responsiveness. Either emulated or on a mobile device.

Fix issue where user count isn't updated

Occurrences
Home Route

Steps to reproduce

1. Open up multiple tabs of home route
2. Create a room in one tab
3. Observe user count be "0"

Expected result
User count should update properly

Actual result
User count doesn't properly update, or stays at 0

Notes
You may need to create a room, then leave it and recreate a room to observe this issue.

Skipping a track pauses it for the host

Steps to reproduce

1. Add a song to the queue (ensure a song is already playing)
2. Vote to skip

Actual result
The track plays on the host's Spotify instance, but pauses as soon as it starts

Expected result
Track should play as soon as the previous track has been confirmed to skip

Notes
There should only be one "pause" function within the socket server, this is most likely the culprit.

[Room] Add User/Settings panel

I should create a user panel which includes options for settings.

Features

• Allow users to change settings within panel
• Give users a short overview of their account (username, avatar)

Notes
The panel does not have to contain all of the global settings allowed for the user. This could be enhanced with a modal which allows the user to select more advance settings.

The avatar should be local, the user cannot change the avatar, unless they change it within their Spotify account.

Add onto "Login"

• Ensure login instructions are clear
• Give details on what types of permissions need to be allowed
• Add "About" route
• Add onto "callback" route
• Add onto error message

[Room] Add notifications

A notification system should be added to the room itself.

The user should be notified of the following:

• Persons entering the room
• Song which has been successfully skipped
• Host user has changed

Notifications shouldn't be exclusive to work for just the [Room] component, as they made be extended to the lobby as well.

Any notifications should be marked as such:

1. Success
2. Error
3. Warning
4. Info

Examples of notifications:

1. http://ui-patterns.com/patterns/notifications

Server console.log gets ran multiple times

Steps to reproduce:
Upon creating a "private room", the server logs in repetition the following:

{ roomID: ' someID ' }

Expected Result
Server should not log in repetition, this most likely means that other statements might be getting ran in addition.

[Room] Access token is sent along socket data

Within the file "\UsersRoomsPage\index.vue", the users access token is sent along with the data sent via the socket.

On line 64

this.socketConnect.on('user', (data) => { ... });

Data returns the following:

[
  {
    "id": "id",
    "userCount": 1,
    "access_token": "ACCESS_TOKEN",
    "devices": {
      "devices": [
        {
          "id": "id",
          "is_active": false,
          "is_private_session": false,
          "is_restricted": false,
          "name": "Device",
          "type": "Computer",
          "volume_percent": 21
        }
      ]
    }
  }
]

Alongside of the access_token, the device(s) ID is also being returned. This data should not reach the client side, only the back end for usage of validation.

No results does not produce message

Searching term with no results does not product message
Currently, when you search a term which does not produce any results, nothing will be returned stating such.

Steps to reproduce the behavior:

1. Go into a room
2. Click on 'Add to queue'
3. Click input and search 'somerandomtitle'
4. See issue stated above

Expected behavior
A message should be produced for user, so that they know that there are no results for this query.

Desktop (please complete the following information):

• Browser Firefox

Add indication of queued songs

Currently no way to see who queued a song
I should add a feature where it shows who queued a song. This could be done via notifications and or making the Queue/History section more interactive, so that it provides more details.

Solution
Upon queuing a song, whomever queued that song should be emitted from the server to the room, and displayed for any user to see.

Notification option
We could add this to notifications, but add it so that it's the lowest priority, as there may be many queued songs in a short duration.

Add interactive albums/songs

Allow users to interact with queued albums / songs
Currently, the songs which are queued, or have been queued are static. Meaning that they are not interactive. I should add a way so that a user can be linked to the Spotify page for that song.

Add interactive content
This could be done by just linking the queued song back to the original Spotify page, or we could utilize the Spotify API and present it in some fashion, like a modal which has the details for that album / song.

Additional context
With whatever route is taken, there should always be a link back to the original Spotify page.

Add onto "Lobby"

Create rooms where users can join rooms within the lobby. The following will need to be added.

• Ensure users can join rooms via the lobby
• Ensure users can leave rooms
• Delete room if no active users
• Add count of users in a "room"
• Add "settings" modal, for room creation
• Add working private room to modal
• Add working room limit to modal
• Add user "pane"
• Ensure genres are interactive
• Add genres to modal
• Add "About", "Need Help?" Links
• Add pagination

This is a WIP, any new addition to the lobby/room section will be listed here as a "to-do".

[Room][A11Y] Notification Panel

Due to Vue and it's reactive nature, upon closing the notification panel, it itself will be removed from the DOM. Meaning any meaningful notifications will not be announced to a screen reader regardless of the container having an aria-live="polite".

How to fix
This issue could be handled in a number of ways. One being to have a separate element which will be hidden from all users besides ones using AT that will passively generate the incoming notifications.

Another option is to make the notification panel only hidden off screen, and never truly removed from the DOM.

Implement accounts

Since Firebase is being integrated, we will prioritize using accounts, but keep "guest" functionality.

Here are a few key features for "users" and "guests"

Guest

• Does not require account to login
• Utilizes Spotify data to make guest account (user, images, etc)
• Can create rooms (temporary)

User

• Anyone can register and create an account
• Allows you to customize your display name
• Will allow saving of room/settings
• Can change image from current Spotify avatar
• Can utilize upcoming chat feature

Security

• Ensure that firebase has proper security protocols in place

Implement a way to save guest settings if guest creates an account. In the future, guests should be restricted from making rooms.

Implement CI/CD process

Current Process implements more bugs into production
The current process implements more bugs into production code. If a CI/CD process was implemented it could cut out some of these bugs.

Solution
This is how I'd want the pipeline to be set up in steps

1. Pushed to a separate branch isolated from the master branch
2. Utilizing GitHub actions, build & test, if either of these stages fails, stop here.
3. If success, merge into master branch.

Step #3 should in then be the step which "notifies" Netlify & Heroku.

Hotfix
A "hotfix" could skip the pipeline above, depending on the urgency of the fix itself. A hotfix should still be pushed to its own branch, but skips step #2.

Add hosting

Allow users to "Host" alongside of the room owner
When a user opts to host, their Spotify client will be called whenever a track is played, alongside of the room owner and any other users that host. There will be no limit in how many users can host, but only users with Spotify premium can take advantage of this feature.

How it works
Users will be able to click a button in the room to join the host queue. If a track isn't currently being played then the very next song will play from their Spotify account. If a track is currently playing, the next song will play on their account.

Users will also be given an option to always host, which will be located in the settings tab.

Add onto "Room"

The following will need to be added for rooms;

• Allow user to add tracks to queue
• Allow user(s) to skip on tracks
• Allow host to skip on any track without vote
• Adding track to empty queue plays the song
• Update "playing tracks" based on current track playing
• Grab device id from user
• Add "History"
• Add "Users"
• Allow other users to DJ/Host