naumch1k/one-fall

Landing page for ONE FALL, Salem-based melodic punk and hardcore quartet has rapidly made a mark in New England

one-fall's Issues

BUG: Ensure Unique Track References in useInitAudioTrackRefs Hook

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

In our project, we currently use a custom useInitAudioTrackRefs hook to create a reference for each track's audio element on our page. These refs are later used to obtain the duration of each track, calculate album duration, start and pause track playback, and get the timestamp, audio object currentTime property, of the playing track to display the player's progress.

useInitAudioTrackRefs iterates through all the albums and collects tracks into a single array.

const [tracks, setTracks] = useState<ITrack[]>([])

  useEffect(() => {
    const getAllTracks = (data: { items: IAlbum[] }) => {
      let allTracks: ITrack[] = []

      data.items.forEach(album => {
        album.tracks.items.forEach((track: ITrack) => allTracks.push(track))
      })

      setTracks(allTracks)
    }

    getAllTracks(data)
  }, [data])

Then, a key-value pair is created in the audioTrackRefs object for each track in the tracks array. The key is set to the track's name.

  const audioTrackRefs: Record<string, TAudioRef> = {}
  
  tracks.forEach(track => audioTrackRefs[track.name] = createRef<HTMLAudioElement>())

The potential problem here is that if two albums have tracks with the same name (which is not uncommon in the music industry, e.g., Greatest Hits), the reference created for the second track will overwrite the reference created for the first track. This can lead to incorrect duration calculations for tracks and albums and playing the wrong track.

Describe the solution you'd like

To avoid key collisions, we should use a unique identifier for each track as the key. This could be a combination of the album name and the track name, or a unique track ID if available.

const uniqueKey = `${track.albumName}-${track.name}`

The proposed solution requires updating useAlbumInfo and useAudioTrackDuration hooks to use these unique keys.

Describe alternatives you've considered

When we integrate with a database or a CMS, we could leverage the unique identifier (e.g., _id or equivalent) provided by the database or CMS to reference each track.

BUG: Hover Effects Missing in Microsoft Edge Due to Browser Window Border

Describe the bug

Several UI elements do not display hover styles when using the Microsoft Edge browser

To Reproduce

Steps to reproduce the behavior:

1. Go to https://develop--one-fall.netlify.app/
2. Click on MUSIC link in the main navigation menu
3. Locate the BUY DIGITAL ALBUM button for the album "One Fall"
4. Hover the cursor over the BUY DIGITAL ALBUM button

Expected behavior

The background color of the BUY DIGITAL ALBUM button should change to yellow when hovered over

Actual behavior

In Microsoft Edge, the background color of the BUY DIGITAL ALBUM button does not change when hovered over

Screenshots, Video, GIFs

Screen.Recording.2024-06-10.at.5.23.06.PM.mp4

Desktop:

• OS: macOS Sonoma
• Browser: Microsoft Edge
• Version: 125.0.2535.92

Additional context

Other affected elements include Audio Track, Event Link, Merch Card image, and Merch Card BUY ON BANDCAMP button.

The issue appears to be caused by Microsoft Edge having a border around the window that reduces the viewport width by at least 8px. Hover effects in our project are set kick in at a minimum screen width of 1280px. Changing the media query to @media screen and (min-width: 1272px) resolves the issue.

Additionally, during the debugging process, it was also discovered that layouts originally intended for tablet landscape are now applied on smaller desktop devices in Microsoft Edge for the same reason.

Screen.Recording.2024-06-10.at.6.01.18.PM.mp4

DOCS: Add Contributors Guide

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

Adding contributing guide would be nice. Also new-issue workflow will need to be updated with following:

For full info on how to contribute, please check out our [contributors guide]().