[Enhancement] Update UI to indicate that a click on a podcast's "+" is being processed

wtanksleyjr commented 1 year ago

Clear and concise description of the problem

As a general principle it's nice to react to a click within a tenth of a second, but this is a specific case where I think it's a good first place to spend effort.

When searching for a podcast, I switch from "Home" to "Podcast" and then click the little "+" button. I then type some text, scroll through the resulting list, and then click one of their "+" icons.

The system appears to not do anything; but in fact the logs report than in the background it's searching, finding the podcast at a specific server, getting RSS, and downloading 4 most recent episodes. Meanwhile, the user has no affordance that anything is happening; they might click other "+" buttons, try the search again, reload, flip through pages, and at some point they'll suddenly notice that (apparently after all 4 episodes have downloaded) a podcast entry will appear -- if they wait long enough.

Alternative

Providing a simple animated gif is good enough to let the user feel that their input worked, but more feedback is possible; an animated gif can be worse than nothing if the server crashes, leaving the gif "happily" spinning misleadingly. Progress bars or a little subwindow giving a general indication of the task that's currently being done can be both more reassuring and more informative.

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

SamTV12345 commented 1 year ago

Thanks for creating an issue. If you load the page do you see a Connected log in your browsers dev tools? When you click on the + icon it should start fetching the podcast. If it is fetched (takes normally less than a second) it should be added to the podcast screen immediately. When a podcast is downloaded and you are on the specific podcast page the cloud icon should be replaced by a play icon indicating a downloaded podcast episode.

Nevertheless I really need more animations. I'm going to add some loading icons when the user types and the query is sent to the server. Alerts are also on my ToDo list. Maybe a snack bar.

wtanksleyjr commented 1 year ago

I can run docker-compose logs podfetch (or podgrab, I forget which, both names are present) on my server and see that as soon as I click, the search begins and everything else follows. Nothing gets added to any screen, including notifications, until all 4 episodes are finished downloading, though, at least not that I can see -- I've tried several times, and clicked around really hunting for them (of course I did this after having the idea of checking the logs, since otherwise I wouldn't have thought anything was happening, it takes a LONG time).

SamTV12345 commented 1 year ago

I meant the browser dev tools. You should have a message Connected in your browser console. Please check out the screenshot below.

wtanksleyjr commented 1 year ago

Oh wow, your view of the page is impossible to reach from my system -- I can't actually see any episodes, only the tablet representing the podcast; I can click the star to make it a favorite but can do nothing else. I just assumed that listening to anything was a pending feature! I didn't know I was that badly broken.

It's a failure to connect, just like you thought:

WebSocket connection to 'wss://podfetch.tanksleyjr.usws/' failed: 
(anonymous) @ index-7a9ab748.js:151

My page is https://podfetch.tanksleyjr.us, and that is what I placed in the config. Is it possible I need to put a localhost address there instead, since I'm reverse-proxying?

SamTV12345 commented 1 year ago

Ah found the error. Put https://podfetch.tanksleyjr.us/ into SERVER_URL.

wtanksleyjr commented 1 year ago

That's exactly what I had ... I copied and pasted it instead, just in case, but it behaves the same.

-Wm

On Sat, Apr 1, 2023 at 8:42 AM SamTV12345 @.***> wrote:

Ah found the error. Put https://podfetch.tanksleyjr.us/ into SERVER_URL.

— Reply to this email directly, view it on GitHub https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493012982, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6KWCGVAR65I6VFURRLW7BEEXANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.***>

SamTV12345 commented 1 year ago

Is the / really the last character in your SERVER_URL? The code joins SERVER_URL and ws together. So if there is no slash at the end of the SERVER_URL the path gets added to the hostname.

wtanksleyjr commented 1 year ago

Oh wow, that did it! I guess my browser's "Copy link address" trims trailing slashes, and so did my brain.

Fantastic, the whole site looks a TON better (of course).

The same problem (that I don't see the result of clicking on a podcast's "+" button) remains, unfortunately, including that I don't see any updates to the site until the first few episodes are downloaded.

But wow, this is much nicer, and now I can see episodes and so on.

-Wm

On Sat, Apr 1, 2023 at 10:47 AM SamTV12345 @.***> wrote:

Is the / really the last character in your SERVER_URL? The code joins SERVER_URL and /ws together. So if there is no slash at the end of the SERVER_URL the path gets added to the hostname.

— Reply to this email directly, view it on GitHub https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493056076, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6LEX3ZHTMJGGCFPIH3W7BS4XANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.***>

SamTV12345 commented 1 year ago

Weird. Did you activate Websocket Support in NPM?

wtanksleyjr commented 1 year ago

I said that the site generally works, I can do a lot more than I could before, like click on a podcast to see its episodes (I couldn't before). I don't know what you're saying "weird" about, I thought (and think) you found the problem -- the URL has to end with a slash.

I don't know what "NPM" means, though.

-Wm

On Sat, Apr 1, 2023 at 11:06 AM SamTV12345 @.***> wrote:

Weird. Did you activate Websocket Support in NPM?

— Reply to this email directly, view it on GitHub https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493063358, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6LC3DTOYOZJHPNK5MDW7BVC7ANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.***>

SamTV12345 commented 1 year ago

NPM stands for Nginx Proxy Manager - an interactivate Reverse Proxy with built in Let's Encrypt Renewal. At least the site works for now. To dig further into your problem I would need again the browser console output. Could you please provide them? Which service are you using to expose services to the internet behind Basic Authentication?

wtanksleyjr commented 1 year ago

I think you solved my problem, what's left to solve?

-Wm

On Sat, Apr 1, 2023 at 11:17 AM SamTV12345 @.***> wrote:

NPM stands for Nginx Proxy Manager - an interactivate Reverse Proxy with built in Let's Encrypt Renewal. At least the site works for now. To dig further into your problem I would need again the browser console output. Could you please provide them? Which service are you using to expose services to the internet behind Basic Authentication?

— Reply to this email directly, view it on GitHub https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493065965, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6JA33VYBPY7542VWSTW7BWLTANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.***>

SamTV12345 commented 1 year ago

I though you had the problem that when you click the + icon the newly added Podcast is not added automatically and you need to refresh the page.

wtanksleyjr commented 1 year ago

Oh, I see! Yes, that's right ... although now that I try it the problem's worse... It doesn't do anything at all when I click "+", it doesn't even show in the Docker logs. Wow, what did I do this time :) !

So I popped out the Console, and sure enough there's an immediate error when I hit "+".

Of course, the problem here might be that the podcast in question is passworded -- the 400 response kind of hints at that. But probably it should at least log something.

It begins index-7a9ab748.js:100 POST https://podfetch.tanksleyjr.us/api/v1/podcast/itunes 400

...and then continues:

index-7a9ab748.js:100 Uncaught (in promise) ue {message: 'Request failed
with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config:
{…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config:
{transitional: {…}, adapter: Array(2), transformRequest: Array(1),
transformResponse: Array(1), timeout: 0, …}message: "Request failed with
status code 400"name: "AxiosError"request:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0,
withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data:
'Json deserialize error: missing field `trackId` at line 1 column 12',
status: 400, statusText: '', headers: pl, config: {…}, …}stack:
"AxiosError: Request failed with status code 400\n    at r8 (
https://podfetch.tanksleyjr.us/ui/assets/index-7a9ab748.js:100:952)\n    at
XMLHttpRequest.p (
https://podfetch.tanksleyjr.us/ui/assets/index-7a9ab748.js:100:4051)"[[Prototype]]:
Error
Promise.then (async)
m @ Podcasts-ef19fff1.js:1
onClick @ Podcasts-ef19fff1.js:1
Ww @ index-7a9ab748.js:37
Gw @ index-7a9ab748.js:37
Jw @ index-7a9ab748.js:37
Up @ index-7a9ab748.js:37
nv @ index-7a9ab748.js:37
(anonymous) @ index-7a9ab748.js:37
o0 @ index-7a9ab748.js:40
kg @ index-7a9ab748.js:37
Gl @ index-7a9ab748.js:37
jd @ index-7a9ab748.js:37
f3 @ index-7a9ab748.js:37

... want me to expand any of those?

-Wm

On Sat, Apr 1, 2023 at 2:24 PM SamTV12345 @.***> wrote:

I though you had the problem that when you click the + icon the newly added Podcast is not added automatically and you need to refresh the page.

— Reply to this email directly, view it on GitHub https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493128458, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6OXJJQXUMGBQJIDA6TW7CMJBANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.***>

wtanksleyjr commented 1 year ago

Oh, for authentication and reverse proxying I'm using "Caddy 2", I'm having it do HTTPS and basic auth. It normally handles websockets in the same config (it does for Audiobookserver, for example).

On Sat, Apr 1, 2023 at 11:17 AM SamTV12345 @.***> wrote:

NPM stands for Nginx Proxy Manager - an interactivate Reverse Proxy with built in Let's Encrypt Renewal. At least the site works for now. To dig further into your problem I would need again the browser console output. Could you please provide them? Which service are you using to expose services to the internet behind Basic Authentication?

— Reply to this email directly, view it on GitHub https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493065965, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6JA33VYBPY7542VWSTW7BWLTANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.***>

SamTV12345 commented 1 year ago

Oh, I see! Yes, that's right ... although now that I try it the problem's worse... It doesn't do anything at all when I click "+", it doesn't even show in the Docker logs. Wow, what did I do this time :) ! So I popped out the Console, and sure enough there's an immediate error when I hit "+". Of course, the problem here might be that the podcast in question is passworded -- the 400 response kind of hints at that. But probably it should at least log something. It begins index-7a9ab748.js:100 POST https://podfetch.tanksleyjr.us/api/v1/podcast/itunes 400 ...and then continues: index-7a9ab748.js:100 Uncaught (in promise) ue {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Request failed with status code 400"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: 'Json deserialize error: missing field `trackId` at line 1 column 12', status: 400, statusText: '', headers: pl, config: {…}, …}stack: "AxiosError: Request failed with status code 400\n at r8 ( [https://podfetch.tanksleyjr.us/ui/assets/index-7a9ab748.js💯952)\n](https://podfetch.tanksleyjr.us/ui/assets/index-7a9ab748.js:100:952)%5Cn) at XMLHttpRequest.p ( [https://podfetch.tanksleyjr.us/ui/assets/index-7a9ab748.js💯4051)"[[Prototype]]](https://podfetch.tanksleyjr.us/ui/assets/index-7a9ab748.js:100:4051)%22%5B%5BPrototype%5D%5D): Error Promise.then (async) m @ Podcasts-ef19fff1.js:1 onClick @ Podcasts-ef19fff1.js:1 Ww @ index-7a9ab748.js:37 Gw @ index-7a9ab748.js:37 Jw @ index-7a9ab748.js:37 Up @ index-7a9ab748.js:37 nv @ index-7a9ab748.js:37 (anonymous) @ index-7a9ab748.js:37 o0 @ index-7a9ab748.js:40 kg @ index-7a9ab748.js:37 Gl @ index-7a9ab748.js:37 jd @ index-7a9ab748.js:37 f3 @ index-7a9ab748.js:37 ... want me to expand any of those? … -Wm On Sat, Apr 1, 2023 at 2:24 PM SamTV12345 @.> wrote: I though you had the problem that when you click the + icon the newly added Podcast is not added automatically and you need to refresh the page. — Reply to this email directly, view it on GitHub <#31 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6OXJJQXUMGBQJIDA6TW7CMJBANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.>

The problem is related to the podcast feed. Which podcast do you want to download?

wtanksleyjr commented 1 year ago

BTW this wasn't intended as a bug report, it was just suggesting a new feature. It turns out I had a config bug :) .

Yup, agreed, the podcast I'd grabbed was defunct (I pulled something I'd liked in the past, but it's dead now). (OTOH, add that to this feature request -- getting an error probably shouldn't just sit there and look like nothing happened.)

I tried "Brain Science Podcast", and it works -- in fact it draws the podcast as soon as it downloads its first episode. It's still a delay, but at least it doesn't take so long anymore.

On Sat, Apr 1, 2023 at 2:55 PM SamTV12345 @.***> wrote:

Oh, I see! Yes, that's right ... although now that I try it the problem's worse... It doesn't do anything at all when I click "+", it doesn't even show in the Docker logs. Wow, what did I do this time :) ! So I popped out the Console, and sure enough there's an immediate error when I hit "+". Of course, the problem here might be that the podcast in question is passworded -- the 400 response kind of hints at that. But probably it should at least log something. It begins index-7a9ab748.js:100 POST https://podfetch.tanksleyjr.us/api/v1/podcast/itunes 400 ...and then continues: index-7a9ab748.js:100 Uncaught (in promise) ue {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BADREQUEST"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Request failed with status code 400"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: 'Json deserialize error: missing field trackId at line 1 column 12', status: 400, statusText: '', headers: pl, config: {…}, …}stack: "AxiosError: Request failed with status code 400\n at r8 ( https://podfetch.tanksleyjr.us/ui/assets/index-7a9ab748.js💯952)\n%5Cn) at XMLHttpRequest.p ( https://podfetch.tanksleyjr.us/ui/assets/index-7a9ab748.js 💯4051)"[[Prototype]]%22%5B%5BPrototype%5D%5D): Error Promise.then (async) m @ Podcasts-ef19fff1.js:1 onClick @ Podcasts-ef19fff1.js:1 Ww @ index-7a9ab748.js:37 Gw @ index-7a9ab748.js:37 Jw @ index-7a9ab748.js:37 Up @ index-7a9ab748.js:37 nv @ index-7a9ab748.js:37 (anonymous) @ index-7a9ab748.js:37 o0 @ index-7a9ab748.js:40 kg @ index-7a9ab748.js:37 Gl @ index-7a9ab748.js:37 jd @ index-7a9ab748.js:37 f3 @ index-7a9ab748.js:37 ... want me to expand any of those? … <#m-1697000109958710349_> -Wm On Sat, Apr 1, 2023 at 2:24 PM SamTV12345 @.> wrote: I though you had the problem that when you click the + icon the newly added Podcast is not added automatically and you need to refresh the page. — Reply to this email directly, view it on GitHub <#31 (comment) https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493128458>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6OXJJQXUMGBQJIDA6TW7CMJBANCNFSM6AAAAAAWPITJ6E https://github.com/notifications/unsubscribe-auth/AAJ7H6OXJJQXUMGBQJIDA6TW7CMJBANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.>

The problem is with the podcast feed. Which podcast do you want to download?

— Reply to this email directly, view it on GitHub https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493135316, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6PAZZUQLMMNOV7FMADW7CP4PANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.***>

SamTV12345 commented 1 year ago

Great that you could solve that issue. I will test this podcast tomorrow. The trackId of the Podcast should be a mandatory field but could be that it wasn't at that time. Parsing podcasts is really not funny as there are millions out there and it is hard to catch all variants. But good to have another sample to test out.

I will add more UI feedback next.

Having basic auth in the app was more important to me. Just merged the PR that solved the latter problem. It will take a bit until the latest tag is pushed again as the Raspberry PI has the Development build in its pipeline. So expect in the worst case 12 hours from now. You can then turn off Basic Auth in Caddy and turn that on in your docker-compose.

wtanksleyjr commented 1 year ago

Cool, sounds like a good idea.

-Wm

On Sat, Apr 1, 2023 at 3:12 PM SamTV12345 @.***> wrote:

Great that you could solve that issue. I will test this podcast tomorrow. The trackId of the Podcast should be a mandatory field but could be that it wasn't at that time. Parsing podcasts is really not funny as there are millions out there and it is hard to catch all variants. But good to have another sample to test out.

I will add more UI feedback next.

Having basic auth in the app was more important to me. Just merged the PR that solved the latter problem. It will take a bit until the latest tag is pushed again as the Raspberry PI has the Development build in its pipeline. So expect in the worst case 12 hours from now. You can then turn off Basic Auth in Caddy and turn that on in your docker-compose.

— Reply to this email directly, view it on GitHub https://github.com/SamTV12345/PodFetch/issues/31#issuecomment-1493140378, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJ7H6J6QUJ53TGHLEJ5GZTW7CR6VANCNFSM6AAAAAAWPITJ6E . You are receiving this because you authored the thread.Message ID: @.***>

SamTV12345 / PodFetch