Merge: Global audio player and queue

neatonk commented 3 weeks ago

Overview

Copy the global player and queue implementation from the mesa-app repo and adjust it to accommodate external files hosted on IPFS or Arweave.

Requirements

Uses code from existing GlobalAudioPlayer components.
Player is present on all pages, when user is authenticated.
Queue and playback state are not affected by navigation.
Files can be queued from any project.
Works with Next.js app router.

Additional considerations

This is being completed before #51 and will be used with audio files stored on IPFS or arweave. For the purposes of this issue, those files may be hardcoded or introduced via a simple form with a text input that accepts valid IPFS/arweave links and adds a file reference to the project for each link.
Files streamed from IPFS or arweave may require an intermediary cache, prefetch, proxy, or gateway in order to stream properly.

Kunkka0822 commented 3 weeks ago

I've set up the UI and foundational elements of the global player.

useAudioPlayer: Manages audio element creation, playback, and state
MediaController: Provides a user interface for audio control
MediaPlayer: Integrates MediaController with mock data
MediaProvider, useMedia: Manages and provides access to current media state across components

Kunkka0822 commented 3 weeks ago

@neatonk To integrate IPFS-hosted external files, I am looking to use the ipfs-http-client node module. However, after installing it, I've hit a snag with a Module Not Found error related to the 'ethers' package, specifically for ./lib/utils.

/node_modules/.pnpm/@thirdweb-dev+react@4.6.30_@ethersproject+abstract-provider@5.7.0_@ethersproject+abstract-sig_l5jp5qim7fhmxsn5ocb4o7rhtm/node_modules/@thirdweb-dev/react/dist/oneKeyWallet-cb776e55.browser.esm.js:21:1
Module not found: Package path ./lib/utils is not exported from package /root/kunkka/mesa/node_modules/.pnpm/@thirdweb-dev+react@4.6.30_@ethersproject+abstract-provider@5.7.0_@ethersproject+abstract-sig_l5jp5qim7fhmxsn5ocb4o7rhtm/node_modules/ethers (see exports field in /root/kunkka/mesa/node_modules/.pnpm/@thirdweb-dev+react@4.6.30_@ethersproject+abstract-provider@5.7.0_@ethersproject+abstract-sig_l5jp5qim7fhmxsn5ocb4o7rhtm/node_modules/ethers/package.json)

I'm seeing this error when trying to use the module in 'WithWallet.tsx'.

Even though I've double-checked the 'ethers' installation and the import paths, which all look good, and I've tried reinstalling the node modules, the issue won't go away.

I'd really appreciate any advice or tips on fixing this.

neatonk commented 3 weeks ago

Hi @Kunkka0822, you may be able to fix this by removing your node_modules folder then running pnpm i for a fresh install. If not, you can commit your changes to a new branch and push it to GH for review. I'll have a look and see if I can reproduce the issue. Just include "WIP" in the commit and branch name so we know it's unfinished.

Kunkka0822 commented 3 weeks ago

@neatonk I've just pushed codebase to new branch. Please check, Thanks!

neatonk commented 3 weeks ago

I think if you use pnpm v6 it will just work...

If you can, install pnpm v6 and then try again.

You may need to restore the lock file and reinstall the deps. e.g.

git restore pnpm-lock.yaml
pnpm i

neatonk commented 3 weeks ago

Btw, this is temporary workaround. The issue will be resolved upstream by removing or upgrading the thirdweb sdk and the related ethers compatibility shim code.

Kunkka0822 commented 3 weeks ago

Okay, I got it.

cwdevteam / mesa