stephane-r / holoplay-pwa

Web app using Invidious API for listening Youtube audio source.

Hi there 👋

🔭 I'm Stéphane, a passionate self-taught JavaScript developer who makes apps and websites. I'm currently working at Oodrive as a React-Native Developper.

Things i work with

My latest projects

HoloPlay

TinyIPTv

My Github stats

holoplay-pwa's Issues

armv7 architecture

Hello, I'm using CasaOS as a HomeServer with Raspberry PI 3B+ (armv7), and I would like to use HoloPlay (using docker) in it, but the thing is I think HoloPlay is only in x86-64 arch, right?
I can help with this, I just have no idea how can I start with this type of porting.
Which would be the steps to make HoloPlay possible in armv7?

Volume resetting when loading other page

Hey there!
Really like your project. i installed it through CasaOS in a docker container (spout8301/holoplay:1.9.1) and the volume keeps resetting to max when i play a song and for example switch to playlists or even change the song.

Im running Firefox Version 117.0 (64bit), Edge 116.0.1938.69 (64bit) and Chrome 116.0.5845.180 (64bit).
Neither Chrome or Edge got Extentions installed.

In Edge the Audio Mode isnt supported sometimes (youtube unknown error 150) and then again it works after reloading.

My Setup:
Proxmox Container running debian11-standard_11.7, CasaOS v0.4.4.2 and docker version 24.0.6 (build ed223bc)

My docker config file spat out by Portainer

Steps to reproduce:

1. Install Docker Container spout8301/holoplay:1.9.1
2. go to IP_ADDR:3000
3. change to darkmode
4. Search for a song in the search bar (in my example "This Suffering" by Billy Talent, love that song!)
5. Change volume
6. click on playlists on the sidebar

This should reset the volume back to max.

If you have any questions please dont hesitate to contact me :)
~ Melli

SponsorBlock

If this app gets Youtube and plays music, it would be nice if SponsorBlock could be used.

playback not working for all

Detects dark modes of the system

It is already possible to switch between dark and light. When I first open the site, if the system is dark, I want it to be dark automatic.

I found the following code.

const isDarkMode = () => 
  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

https://ultimatecourses.com/blog/detecting-dark-mode-in-javascript

[Hacktoberfest] Add the space key shortcut to pause music

Similar to other great apps, add the space key shortcut to pause currently playing music.

For this, you can use use-hotkeys hooks from Mantine : https://mantine.dev/hooks/use-hotkeys/

Playlist is nit saved

Playlist is not saved when ending app.

Start current playback on another HoloPlay device

Similar to Spotify, being able to start current playback on another HoloPlay device.

Several possible approaches:

• use a user account and authenticate on both devices to have synchronization (requires a web server with a database)
• a simple websocket connection with a deviceId (requires a web server)
• a simple ping using the serverless function (link holoplay-serverless), the least practical method
• using WebRTC Messages

I would like to avoid the database approach : let's keep our data with us and not on some instance. The websocket approach is simple and suitable for functionality, but requires hosting a Node.js server.

Another method ?

Automatic search

If it's music, it would be useful if it automatically plays the next music.

It will continue to play a song similar to the first song selected. It is useful to have SponsorBlock.

[Bug/Suggestion] App frozen if invidious instance is unreachable

Error: When selfhosting with docker, if the default invidious instance is unreachable, the app will hang loading indefinitely.

Steps to reproduce:

1. Start the docker container for the first time
2. Receive an error
   
3. App keeps loading indefinitely

(the screenshot shows an html 500 error, but it once tried to load an instance that is regionblocked for me and it would also load indefinitely with a timeout error, couldn't capture a screenshot)

Probably should be a separate issue, but by trying to load the popular page on instances with popular page disabled, app hangs too.

Suggestion: add an option to enter the settings(or just change the instance) during the loading.

Music player does not work on iOS

I have installed HoloPlay on my server and when I access through my iOS device, the music does not play.

I have tried Safari and Edge, neither works, I think all browsers on iOS work under Web-Kit, maybe that is the problem, but I read that HoloPlay was compatible with iOS devices.

Can you please confirm this for me?

Also, I take advantage of this thread to ask something, is it normal that the thumbnails take a long time to load? Sometimes they don't even load, sometimes they load very fast and sometimes they load slowly.

Thank you for your help.

docker issue

Docker says:

root@nas:/var/docker/holoplay# docker run -d -p 8006:8006 spout8301/holoplay:latest
Unable to find image 'spout8301/holoplay:latest' locally
docker: Error response from daemon: manifest for spout8301/holoplay:latest not found: manifest unknown: manifest unknown.
See 'docker run --help'.

CSS for mobile device

The menu bar at the bottom will not appear until you scroll to the bottom. So, they are not displayed when additional content are loaded, such as search results.

---

There is a blank space between the mini-player and the menu. The content can be displayed larger without this space.

---

When the mini-player is enlarged, the close button is not visible on the small screen. Press the Back button on your browser to fit the screen. The close button will be available.

Tablets with wider screens don't have this problem.

Genre

Is it okay if I requesting more features?

It would be useful to easily select a genre. It would just pass the genre word on to the search term.

Sample is my tool : https://genkaku.in/tool/. Or Hyperpipe ( Youtube Music client) https://hyperpipe.surge.sh/explore/. Or Beatbump (Same) https://beatbump.io/trending. There will be more: Metal Indie pop folk instrumental british german.

Decimal place for storage percentage

I think the decimal point should be to two places. Or one decimal place.

• Current: You've used 0.5573496554089362% (5.86 MB) of the available storage
• Proposal: You've used 0.55% (5.86 MB) of the available storage

Trending has music charts

• https://charts.youtube.com/charts/TrendingVideos/us
• https://charts.youtube.com/charts/TrendingVideos/jp

It would be useful to have an automatically retrieved local country and English.

Alternatively, Invidious can simply set a 2-letter country name.

Suggestion: add support for http instances

I'm running my invidious instance with docker on a server and connect to that with tailscale, because of that, all the addresses in the local network are not https. I can add the instance to holoplay when running it locally, but it simply won't load anything.

Times are much longer

When I play music on Holoplay, the time is almost twice as long. You have to wait for around 2 minutes to get to the next song.

Deployed web pages cannot be accessed in China

I really appreciate your support for this project. However, due to the internet censorship in China, even if the project is deployed on a VPS in the United States, accessing the website still requires the use of a VPN. Without a VPN, the website cannot be accessed. Are you asking if this project can automatically proxy access to YouTube?

Broken Card rendering

I came across a usecase with broken Cards.

For fix this, use Grid component from Mantine instead of media queries in CSS.

Add esbuild

https://www.npmjs.com/package/craco-esbuild

fix, feat: multiple issue to-do list

Hi, I love the project!

Just wanted to document what I'd like to contribute soon. Each will be a separate PR. Please let me know if any of these are being worked on already or if you have implementation tips/design requirements!

• Import/export
  • feat: Save volume level as part of the state
  • feat: Sync settings via JSON export
• UX
  • feat: refactor "Next song" as "Queue" and add "Add to Queue", allow removal from queue as well
    • This one's a lot larger
  • feat: settings: text-match filter out of automatic Queue
    • ex. filter out "1 hour"
  • feat: collapsible callouts with tips on first load
• CSS
  • style: modify color variables for readability
    • Also a large project
  • fix: text visibility on Player background for some extracted colors
    • If the primary color is close to white, text is unreadable on light mode since it blurs through to the white app background

[Hacktoberfest] Translation string with English remaining

menu.video.other: This "Other" remains in English.

Add Invidious Instance Dialog: settings.general.invidious.type can be used

docker: Error response from daemon: manifest for spout8301/holoplay:latest not found: manifest unknown: manifest unknown.

Hi,

When I try to pull or build the Docker image, I got the "
Unable to find image 'spout8301/holoplay:latest' locally
docker: Error response from daemon: manifest for spout8301/holoplay:latest not found: manifest unknown: manifest unknown." error.

Could you help me, please?

Player : add author link and display full description

• add channel (Author) link on player
• show full description by using Spoiler component

Play all search results

If this app is dedicated to music and not video, I want to easily search and play it all. The "Play All" button is useful.

Playlist import error

I understand that this is under development. The developer may already know.

Playlist import/export was working. But It is an error when I load a playlist that has one song since yesterday. Of course a playlist with many songs is also an error.

holoplay-export-2023-05-17T16 41 25.563Z.txt (This is .json)

Unexpected Application Error!
i is null

XR<@https://app.holoplay.io/static/js/main.c4153499.js:2:749120
Si@https://app.holoplay.io/static/js/main.c4153499.js:2:126461
El@https://app.holoplay.io/static/js/main.c4153499.js:2:138149
Sl@https://app.holoplay.io/static/js/main.c4153499.js:2:137355
Ol@https://app.holoplay.io/static/js/main.c4153499.js:2:136957
Ss@https://app.holoplay.io/static/js/main.c4153499.js:2:186914
wc@https://app.holoplay.io/static/js/main.c4153499.js:2:172682
gc@https://app.holoplay.io/static/js/main.c4153499.js:2:172610
yc@https://app.holoplay.io/static/js/main.c4153499.js:2:172471
ic@https://app.holoplay.io/static/js/main.c4153499.js:2:169251
cc@https://app.holoplay.io/static/js/main.c4153499.js:2:169642
Wo@https://app.holoplay.io/static/js/main.c4153499.js:2:110182
4463/oc/<@https://app.holoplay.io/static/js/main.c4153499.js:2:167184