Giter VIP home page Giter VIP logo

live_beats's Introduction

LiveBeats

Play music together with Phoenix LiveView!

Visit livebeats.fly.dev to try it out, or run locally:

  • Create a Github OAuth app from this page

    • Set the app homepage to http://localhost:4000 and Authorization callback URL to http://localhost:4000/oauth/callbacks/github
    • After completing the form, click "Generate a new client secret" to obtain your API secret
  • Export your GitHub Client ID and secret:

    export LIVE_BEATS_GITHUB_CLIENT_ID="..."
    export LIVE_BEATS_GITHUB_CLIENT_SECRET="..."
    
  • Install dependencies with mix deps.get

  • Create and migrate your database with mix ecto.setup

  • Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.

Learn more

live_beats's People

Contributors

adamwiggall avatar bemesa21 avatar chrismccord avatar colinstark avatar dsdshcym avatar freedomben avatar fzn0x avatar gazler avatar josevalim avatar leejarvis avatar mcrumm avatar mrkurt avatar ndarilek avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

live_beats's Issues

Audio does not play on mobile browsers

Is anyone able to get audio playing on their mobile browsers? I have tested both with Android (Chrome) and iOS (DuckDuckGo and Safari) but it doesn't work on any. Tested with ngrok and Tailscale tailnets.

Also ensured that I clicked on "Listen now" button that pops up at the end of the page.

Feature Request: Can we enable loop and offline playing?

Hello,
Is it possible to host live_beats, and upload the mp3, and then set it to play in loop, and at the same time exit the browser.
Almost like a radio podcast. Any user can join and start listening to my mp3's. I would login tomorrow and set a new playlist.

If there is a different place to discuss this please let me know.

Thanks
Lucas

Non Liveview Page

When reviewing the router it does not look as if the PageController gets used.
I was trying to review what non live view pages this app was using to see how they incorporate them, from what I can tell its not used at all.

Not sure if I'm just overlooking something, but it would seem there is no reason to keep the listed files.

  • lib/live_beats_web/controllers/page_controller.ex
  • lib/live_beats_web/templates/page/index.html.heex
  • lib/live_beats_web/views/page_view.ex
  • test/live_beats_web/views/page_view_test.exs

Wrong size

I thought 20mb was the limit but it seems that's wrong.

Screen Shot 2022-02-02 at 8 09 20

A few UI bugs

Hey, first of all great demo, I love it!

Having said that, I may have found a few bugs in the version deployed to https://livebeats.fly.dev. Attaching a video below.

Summary:

  1. You can start/stop playing on your own profile even if you have no songs - this appears to do nothing. (time: 0:00:5)
  2. I cannot play own or other people's songs by clicking on title (0:00:13)
  3. "Play" button on people's profiles does nothing (0:00:28)
  4. Player gets confused on what it's playing - appears to be playing @chrismccord song while on my own profile (0:01:00)
  5. Playing own song by clicking on title doesn't work, while the icon changes to playing, no song actually plays, icon seems stuc in playing state (0:01:28)

Hope it's helpful and maybe someone wants to get rif of these / improve UI!

bugs.mp4

Upload files hyperlink

The drag and drop works perfectly, however, clicking the hyperlink does not pop up the window to select files.

Browser: Firefox 96.0.3 (64-bit) mac

Screen Shot 2022-02-02 at 8 17 50

Feb-02-2022 08-18-11

Clicking "Listen" on an inactive profile should do something to the player / sound

If you hit "Listen" on active profile, then you go to a profile that does not broadcast, or your own (not broadcasting) and you hit "Listen" the UI of the player somewhat updates to show the music that was playing and was paused on your profile but it keeps playing the previous account's audio.

This I think should be with sound:

broken.mp4

show_dropdown aria-expanded applied to wrong element

Currently show_dropdown() applies aria-expanded to the toggled dropdown element instead of the button toggling the dropdown.

There are several widgets that can be expanded and collapsed, including menus, dialogs, and accordion panels. Each of these objects, in turn, has an interactive element that controls their opening and closing. The aria-expanded attribute is applied to this focusable, interactive control that toggles the visibility of the object.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

Users - Active or not?

Sat 12th Feb 2022 I logged in. I managed to get to the URL https://livebeats.fly.dev/anujmiddha although I can't remember how I got there, since there were no ACTIVE USERS listed for me to click on (see screen shot below).
I could hear the music intermittently ie on for a while, stopped for a bit, as if user anujmiddha was actually active (and listening, but switching between play & pause).
Furthermore, I noticed upon inspecting the screen shot that the ping ms is not visible on my avatar nor the other users.
(all tests on Mac 11.5.2 Firefox V96.0.3)
image

Sync & Heavy

More heavy. Would live beats handle this as smoothly as lightweight mp3s?

What it would do if one user have so low bandwidth that will not buffer fast enough of FLAC file sometimes? Would it still play in sync?

Or even better... What about HD mp4 videos play in sync? How would live beats act with this?

An .svg link returns a 404

Hi,

The app builds a URL to an .svg like https://fly.io/ui/images/#{@region}.svg.

However that link currently returns a 404 and results in a broken image icon next to the ping time. For example https://fly.io/ui/images/lhr.svg and https://fly.io/ui/images/iad.svg. Both return a 404, at least for me. I'm not sure if that .svg has since been moved elsewhere or is only available for particular regions.

Failed sign out on brave browser

Hi, first I'm really thank you for making this full example
it's really helpful to understand phoenix live view .
I have a question the sign out doesn't work for brave browser with error:

This page isn’t workingIf the problem continues, contact the site owner.
HTTP ERROR 431

I've tried in chrome and firefox browser and it works, is there any additional settings I should add for brave browser case ?
Thank you

Internal Service Error

I was attempting to review some functionality but visiting https://livebeats.fly.dev/ is showing an Internal Service Error. I think this started on Nov 3 when Github was also having some issues so maybe it's a CI/CD thing?

Hitting "Cancel" on upload song modal, re-opening and hitting "Save" crashes the app displaying "Re-establishing connection" forever

If you start uploading a song, then "Cancel" in the middle, and then if you re-open the modal

  1. The modal is now in some undefined state, having a progress bar from previous upload
  2. You can hit "Save" button, which now breaks something further and "Re-establishing connection" is now forever visible

As a side note, you should probably also not be able to click "Save" while the file is uploading.

broken.mp4

List of active users does not change when the active user renames their profile

The app seem to be updating profile names and even URL in real time when users edit their profile.

But this does not affect the Active Users list at all. When I changed my profile handle from "hubertlepicki2" to "hubertlepicki", it kept saying "hubertlepicki2" in the Active Users list, and when I clicked on such link I got a 404.

broken.mp4

Cannot upload MP3 without ID3 tags

Hello πŸ‘‹
Tried uploading an MP3 (17.6mb) that I converted from WAV with Firefox 96.0.3 on macOS, it stopped in the middle of the upload process:

no-valid-mp3

after adding ID3 for artist & title and re-exporting, it worked. Is checking for valid ID3 tags part of the upload validation check? If so, can the app display what is wrong with the file?

Unable to sign in with github

I recently changed my email address so this may have something to do with it, but any time I try and sign in, I get "We were unable to fetch the necessary information from your Github account". I tried signing in fresh with cleared cookies and whatnot to no avail. I still have my old email listed in github, it's just not my primary one (although I'm not sure if that has anything to do with it).

My info

  • Firefox 106.0.3
  • macOS Ventura 13.0, MacBook Air, M1 2020

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.