Describe the bug

This project has had a few contributors from a few people. It would be good to acknowledge them through an automated way.

Expected behavior

Using the @all-contributors bot add command through issues or prs, they should be added to the contributors section in the readme

Screenshots

Example of how it should/can appear in the readme:

Describe the bug

Currently the Edit Snip label for the settings icon is misaligned.

Expected behavior

Edit Snip label should be centered over settings icon

Screenshots

Additional context

This should be able to fix the alignment issue in the file below:

right: 50%;
transform: translate3d(calc(50%), -1.5rem, 10rem);

Describe the bug

In Queue view, the Settings and Block icons click events are not being triggered. Setting click should open Chorus modal. Block icon should set toggle isSkipped attribute of the track.

To Reproduce

Steps to reproduce the behaviour:

1. Go to Queue, Artist, Album, or Playlist view
2. Click on Snip Edit or Block Icon
3. Click Events are not triggered

Screenshots

If applicable, add screenshots to help explain your problem.

Describe the bug

The manifest.json file has now been moved out of the root project folder and separated into chrome/manifest.json and firefox/manifest.json files. This change is now resulting in the below issue with shields.io badge:

Expected behavior

The version badge should display the current version of the latest release. Currently it's 1.6.1? Anyways, the shields badge url should be changed to reference the manifest.json in the firefox directory. It should be as simple as including the filename query param to the shields route. You can test it on the shields.io site before applying it to the README.

Additional context

While referencing the link above, I would welcome updates to the colour of the other labels. A majority of them are some variant of green, but I would love to see some bright blues, pinks, purples, etc. Maybe update the style as well, but they all badges in the README would need to be update to the new style for uniformity.

Here's the particular line to focus on:

This is to keep it more in sync with Spotify UI

Describe the bug
Settings Icon in Now Playing Widget Should Display Aria Label on Hover. Other icons display an tooltip with their element's aria label and we should follow the lead.

Expected behavior
Hovering over the Settings Icon should display a tooltip displaying a 'Edit Snip' aria label. This is quite similar to the implementation on the track list.

Screenshots
If applicable, add screenshots to help explain your problem.

CURRENT

EXPECTED (based on tracklist implementation)

IMPLEMENTATION

Based on the tracklist implementation, it should be as simple as adding the role and aria-label attributes to the Icon component? Reference

To minimize package size, minify files to a single file. Might actually have to be 3 files:

1. background script
2. content scripts (minify and concat into single file)
3. page scripts (minify and concat into single file)

Add UI to skip a tracks without having to use the slider. Additionally, user should be able to revert the skip just as easily.

Add a button with icon per track (much like the ❤️ button) to toggle skip. By "add" I mean just add the icon on hover over the track.

As the for the data model we can add a isSkipped key with the boolean value toggled from true to false in the DataStore.

{
+      isSkipped: boolean,
       isSnip: boolean,
       endTime: integer,
       startTime: integer
}

Describe the bug

Snip actions like save and delete no longer working causing the following error:

To Reproduce

Steps to reproduce the behaviour:

1. Click on Settings icon in Now Playing Widget or on TrackList
2. Click save (or remove if already a snip)
3. See error (in screenshot below)

Expected behaviour

Should not error and save and remove actions should be performed as before.

Screenshots

CAUSE

Seems to be related to this codeblock:

In a previous commit the slider getter method must have been removed.

SOLUTION

Add back the slider getter method in the SnipControls class.

Describe the bug

When editing a snip, on sliding the endTime (right) thumb to the right (seeking forward) causes Spotify to jump to the next track as the currentTime would now be greater than the snip's endTime.

Expected behavior

I don't want that to happen. In most situations, I want to be able to edit a snip and that entails playing around with the startTime and endTime properties. While editing I want to remain on the same track.

For now this will limited to composing a shareable link of a track's snip by including it in the url query params. On another user with the extension opening the link, then the track should play from the snip markers.

Ex of shareable link:
https://open.spotify.com/track/33T6ABvdB3P2iYOWJnBjsQ?startTime=0&endTime=132

From the url, the startTime and endTime can be be extracted.

Describe the chore

We currently have a loadScript function which takes a file path, creates a script tag, adds the file path as the script src value.

Earlier on we were injecting every script file, but now that we are using es modules, some files/functions are being imported into others. Therefore, we we only need to inject the parent files. As it stands the only file really required seems to be actions/init.js file.

Solution:

Clean up loadScript logic. This can mean either keeping the function and changing the argument to be as string value instead of an array, or just taking the inner code of the function and hard-coding it with the init file:

Ask questions or raise comments below about this issue or a better solution. 😄

Much like the block/unblock UI, I should be able to add/remove a snip on a track without the track being the currently playing/paused song. Clicking on a snip icon should open up the modal with the track info. I should then be able to save a snip for the track without affecting the current playing/paused track.

Describe the bug

We are currently using a div instead of a button as the parent of the settings icon in the Now Playing Widget. This is not semantically correct and has poor accessibility (a11y). We need to replace the div with a button.

Expected behavior

It should have similar accessible properties as displayed for the heart button and the settings icon on a tracklist/playlist/album track

Additional context

Now Playing Icon file: https://github.com/cdrani/chorus/blob/develop/models/icon.js
Example to reference:

Some changes to styles might need to be made to keep the same UI. For example, the visibility attribute does not need to be set as it should always be visible, or the styles coming from the chorus-icon id might need to be updated. Use your discretion and get it as close as possible to the current UI, but just with replacing the div with a button. The a11y portion should transfer over with using the same attributes (role, aria-label, etc) currently on the div and some just based on the button element.

Is your feature request related to a problem? Please describe.

I want to automate the upload and publish step. This is currently done manually, but it can be offloaded to CI to create zipped package and then uploaded and published. For now this can be done on pushes to the main branch. Perhaps, we can add an intermediate step to keep develop in sync with main branch and then publish a release on a schedule instead.

Sources:

1. https://github.com/mnao305/chrome-extension-upload
2. https://github.com/fregante/chrome-webstore-upload/blob/main/How%20to%20generate%20Google%20API%20keys.md

Describe the bug

The Skip Icon aria label position is not aligned with the Snip Icon's aria label

Expected behavior

It should be inline with the Snip Icon's aria label

Screenshots

Setup a github action to create releases

• update manifest.json version number
• commit change to manifest.json, create a tag with new version, and push changes to branch
• create artifact for release based on new version

Is your feature request related to a problem? Please describe.

I would love to see track info displayed in the modal for the track that opened the modal. Somewhere in the red rectangle region.

Describe the solution you'd like

Essentially the same ui as in the Now Playing Widget, but also in the modal

Create a FireFox port to be released to FF Addons. Additionally, include the zipped artifact in releases notes.

Make it work on non-chromium browsers like FireFox & Safari and update release process to include these browsers.

closed with #95

Action Icon toggling should basically switch off all the extension features including:

• Removing the snip icon in the 'Now Playing' widget
• Removing the block icons
• Switch off all snip / block features - tracks should play normally

Reapply the above features when the action icon displays 'on'

Use letter X with x-mark icon from heroicons.com

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    fill="none" 
    viewBox="0 0 20 20" 
    stroke-width="1.5" 
    stroke="currentColor" 
>
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>

Is your feature request related to a problem? Please describe.

I need skip forward and go back a few seconds buttons. Currently, this is only available for podcast episodes,

Describe the solution you'd like

I want these buttons to be available for all audio. Additionally, I want them to be customizable, for instance go back 5 seconds and skip forward 10 seconds. Customization options should be available from the modal

Describe the bug

Currently using a dashed border around the chorus controls modal. Time for a change perhaps?

Expected behavior

Possible New border styles. These are starting points, but use your eyes to feel it out and make it look good.

1. maybe a 6px border radius, 3px width, ridge
2. maybe a solid border, 3px width, optional border-radius of 6, 8, or 10 px
3. Open to other possibilities, but would prefer not to use dashed or dotted

Additional context

Location of #chorus-controls styles. Combine the two blocks into a single #chorus-controls block.

Next & Previous Buttons default click handlers conflict with snip and skip features. On Next click, track might play for a half second prior to either being skipped or currentTime being set to the snip startTime. Same thing occurs with the Previous click.

Easy solution is prevent the default actions and then mute the track. This will give enough time for the CurrentTimeObserver running on a 1 second interval to then apply it's logic on the track.

On Action Toggle, the new events should be removed.

Is your feature request related to a problem? Please describe.

I want to be able to play an artist's entire discography. Obviously it won't be a straight through listen so I want to be able to track the current album and track I am at so that I can resume playback from that state.

Describe the solution you'd like

I want this functionality built into the extension

Describe alternatives you've considered

This can kind of be approximated using the queue features, but I would have to add albums to the queue and if I were to start listening to a different album, track, podcast, etc, then I would need to remember which I album and track I was at and start the queue from that position. This is not ideal.

The text does not seem to be vertically centered. Same issue with the slider left and right text.

Describe the bug

In playlist tracklist view, the skip and settings icons click events are not triggered

To Reproduce

Steps to reproduce the behaviour:

1. Go to a Spotify Curated playlist such as "Discover Weekly"
2. Click on on Skip or Settings Icon
3. Settings icon click should cause Chorus Modal to display. Skip icon should set track as blocked and be highlight in Spotify green colour

Expected behaviour

Settings icon click should cause Chorus Modal to display. Skip icon should set track as blocked and be highlight in Spotify green colour

Screenshots

SOLUTION

Currently the Skip and Settings are set on the overall tracklist container based on the data-testid="track-list" as shown here:

However, for the curated playlists, the data-testid is "playlist-tracklist".

We need to update the container query to include this other element as well. Per MDN:

Multiple selectors may be specified by separating them using commas.

const matches = myBox.querySelectorAll("div.note, div.alert")

however, to keep the line length manageable, preference would be to use an array instead and place the two selectors on separate lines.

Reach out if you need some help resolving this issue. 😄

On a non-snip and non-blocked track, the track should start normally. However, there seems to be a false start where the song starts for a few seconds (<2) and then gets reset back to 0.

Allow for adjusting the playback rate much like for Spotify's podcast episodes.

I want to have multiple snips per song:

• They cannot over lap
• each snip on a track will require a different colour
• on play/loop song should jump from snip to snip
• should be able to edit/delete snip individually on song

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug

Hovering over or clicking on the Chorus/Settings Icon in the Now Playing Widget displays the cursor as the default. It should be a pointer to signify that it's clickable.

ScreenShots

CURRENT

On hover, the default cursor is used.

EXPECTED

Update to use pointer cursor.

IMPLEMENTATION
Apply cursor style attribute to #chorus-icon id: