better mobile icons - [prev added eventlistern to listen for new videomenubar display toggle]

[Yeghro]

slightly modified VideoGrid.css for overlay slide down effect

[bitkarrot]

First test run looks functionally good! Next part to add the nostr + LN icons to the display toggle, for mobile the buttons are still really small and hard to click on, so if we can switch to full screen like the clubhouse panel i shared it might be better.

In the long run it would be better to group all the buttons together instead of where LN currently is. The LN is ok for dialog popup, but haven't tested the nostr profile side box on mobile. This way if we need to add even more nostr related buttons we have the screen real estate to do so! Good work.

https://github.com/user-attachments/assets/93407111-4a6c-4300-a8d4-f0b47f31012b

[bitkarrot]

See additional media references at https://github.com/HiveTalk/hivetalksfu/issues/32

[bitkarrot]

@Yeghro thanks for the PR, I am a bit backlogged this week, but i will get around to reviewing it. thanks for splitting out the method for the profile link. that's great.

[Yeghro]

@Yeghro thanks for the PR, I am a bit backlogged this week, but i will get around to reviewing it. thanks for splitting out the method for the profile link. that's great.

You got it, and no rush, I'm still fine tuning. CSS for the grid is being finicky and still trying to test as much as I can to catch water ever I can.

[bitkarrot]

@Yeghro just tested the pr briefly, the mobile menu works when the video is off. Css could be a little better for the volume bar, and nostr icon, but otherwise its ok.

Some icons that are missing:

• icons not visible for video on.
• icons not visible when screenshare is active.
• icons not visible in broadcast mode

Otherwise, it looks very close to ready. Good work.

I'll put up a staging server soon so that we can test it here before pushing to the live one.

[Yeghro]

@Yeghro just tested the pr briefly, the mobile menu works when the video is off. Css could be a little better for the volume bar, and nostr icon, but otherwise its ok.

Some icons that are missing:

• icons not visible for video on.
• icons not visible when screenshare is active.
• icons not visible in broadcast mode

Otherwise, it looks very close to ready. Good work.

I'll put up a staging server soon so that we can test it here before pushing to the live one.

You're right, I do need to clean up the CSS a bit and copy over changes to video on/screenshare. Got a bit burnt out and distracted. Glad the changes are satisfactory for the most part.

[bitkarrot]

iPhone test - using ngrok - volume bar doesn't seem to move very easily. iPad test - volume bar also doesn't quite scroll.

See videos below.

@ser-sleepy please give feedback on UI/UX, thanks.

https://github.com/user-attachments/assets/bffb9b48-79a2-4779-b3d7-591abf8b22d9

https://github.com/user-attachments/assets/1fcc3e33-e039-40ae-bdbe-196806213d1b

[ser-sleepy]

iPhone test - using ngrok - volume bar doesn't seem to move very easily.

iPad test - volume bar also doesn't quite scroll.

See videos below.

@ser-sleepy please give feedback on UI/UX, thanks.

https://github.com/user-attachments/assets/bffb9b48-79a2-4779-b3d7-591abf8b22d9

https://github.com/user-attachments/assets/1fcc3e33-e039-40ae-bdbe-196806213d1b

different layout and different size buttons with maybe a variant on the edges ? also the nostrich button is on top of the volume bar, maybe fix that

[bitkarrot]

@ser-sleepy what's a variant on the edges mean?

[ser-sleepy]

My bad I meant a button border of like 2px with a corner radius of 50px and the border color being a variant

[ser-sleepy]

or circles..? I wonder how they look like circular 👀 here's an example that I made myself https://favfood.xyz go to the very bottom of the home page where the 3 social media buttons are

[bitkarrot]

@ser-sleepy ah i see

I'm not crazy about making everything circles and uniform. here the designer has a mix of ovals and circles. the trend appears to be

colored circle: for avatar or item to highlight. gray oval: for functions (e.g. msg).

In our app, we want to highlight avatars, nostr and lightning, and everything is just a function.

Example:

In terms of screen real estate, the ovals can be narrower but not so narrow that its hard to tap on the button. Its already a bit of a challenge to tap on the circular nostr icon because it so small. I am continuously testing on the smallest iphone to make sure it can work on all screens.

let's have @Yeghro weigh in. I like what he's done so far.

[Yeghro]

Hey guys, so this is what the current changes should look like, Don't know why the video you posted doesn't show them, maybe I need to check my commits to ensure I uploaded everything properly.

https://github.com/user-attachments/assets/7350a31b-5d05-4856-9750-5a8ff837ceaf

I agree with getting functionality working right is a bigger priority then aesthetics. I was hesitant to put the avatar picture in the slide up menu cuz I thought I would be redundant as it already has it in peer video boxes.

[ser-sleepy]

Agreed as long as it functions as it intended we can work on aesthetics later down the road! Great job @Yeghro 🔥

[bitkarrot]

Latest update looking good @Yeghro !

latest i see: https://video.nostr.build/93d0f9a723c19184e6108af7d3c745504c0cced1c898e2372e14dabe58a8d4c9.mp4

only missing the video and screenshare icons, this is from live hivetalk

[Yeghro]

Making some progress and getting closer to the goal.

https://github.com/user-attachments/assets/3cb8ce55-c798-42c7-aa17-e0e4374ea1cd

I've changed the full click to full screen response from single click to double click to allow for the single click to be for the video menu to display. Still need a bit of fine tuning, but almost there. Let me know what you think.

[bitkarrot]

@Yeghro getting better - whenever you feel ready please do push up the changes so we can test it on tiny mobile, I would like to try 3 dots on tiny screen. I really liked the avatar image you included on the slide up on mobile, feel free to stick in there if its not too much trouble.

The full screenshare on mobile device looks great! now we can watch modernhorrors on tiny mobile :D

[ser-sleepy]

We found two issues while testing inside the staging server with @jeremyd

First issue: Mobile safari doesn’t auto play videos when shared to me but it does auto play when I share it (solution could be to add a button for the admin to toggle on/off auto play for media/ button should be inside media settings)

Second issue/more of a bug: Transcript feature has a bug where if you click the eye for it to disable transcript it’ll still show up from the bottom notification area and overlay on top of whatever you’re doing in that area, specially annoying when you’re typing and using the keyboard inside of chat, one of the most annoying parts about it is it can take that whole section over and not let you finish typing or sending the message. Build: IPhone 15 Pro Max IOS 18.1

[bitkarrot]

@Yeghro, I have moved @ser-sleepy's comment to new separate issues and it is now hidden on this thread.

[bitkarrot]

@Yeghro looks good, tested with last two commits. LFG! Merging.

Congrats!!