UX Issues

[MattyBoombalatty]

1. When utilizing the LiveChat on mobile devices, interacting/tapping on the video player causes the focus to automatically switch to the input in the text chat box. I believe this shouldn't happen as it is jarring and stops people from being able to interact with the video player. They have to do this several times before the video player is allowed to be focused and changes can be made.

2. Chat box sizing leaves much to be desired on mobile devices. You can edit the custom CSS in the plugin settings to change the view height, but this alters it for both desktop and mobile. I've found the best way to set it up so more of the chat box and messages can be viewed is to set height: 60vh; but this shortens the height of the chat window on larger displays, which looks bad.

I believe the chat input box could be decreased to about half its current size, while the chat window itself should take up about 60 percent of the viewport height on mobile devices, and then 100 percent of its parent's height on desktop devices.

[JohnXLivingston]

1. When utilizing the LiveChat on mobile devices, interacting/tapping on the video player causes the focus to automatically switch to the input in the text chat box. I believe this shouldn't happen as it is jarring and stops people from being able to interact with the video player. They have to do this several times before the video player is allowed to be focused and changes can be made.

I can't reproduce this bug. What is your mobile browser? What's your device? What's your device resolution?

2. Chat box sizing leaves much to be desired on mobile devices. You can edit the custom CSS in the plugin settings to change the view height, but this alters it for both desktop and mobile. I've found the best way to set it up so more of the chat box and messages can be viewed is to set height: 60vh; but this shortens the height of the chat window on larger displays, which looks bad.

I know there is still some issues on mobiles. It is not easy to fix. I have some constraints relative to the height in anonymous mode (i need to have enough space to display some prompts and buttons).

In your custom CSS, you can try to add "media queries" to only apply your height when the devise screen is smaller than a certain limit. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

If you think you got a good CSS fix, please share it here, so i can test it, and maybe enable it upstream.

[MattyBoombalatty]

I believe the media queries will not work in the LiveChat theme configuration, unless you're asking me to see if I can fork your project and fix it myself. I wouldn't mind - it's been something I've considered doing. I'm not entirely sure how to set up a development environment for this. Do you have documentation?

S23 Ultra, Brave browser, 3088x1440.

[JohnXLivingston]

I believe the media queries will not work in the LiveChat theme configuration, unless you're asking me to see if I can fork your project and fix it myself. I wouldn't mind - it's been something I've considered doing.

Hum, it should work on the theme configuration. Normally you can paste any valid CSS.

I'm not entirely sure how to set up a development environment for this. Do you have documentation?

Yes: https://livingston.frama.io/peertube-plugin-livechat/contributing/develop/

S23 Ultra, Brave browser, 3088x1440.

Ok. Have you tried with any other mobile browser? I will check if i found a friend with similar mobile, so i can live test with them.

[JohnXLivingston]

1. When utilizing the LiveChat on mobile devices, interacting/tapping on the video player causes the focus to automatically switch to the input in the text chat box. I believe this shouldn't happen as it is jarring and stops people from being able to interact with the video player. They have to do this several times before the video player is allowed to be focused and changes can be made.

@MattyBoombalatty , can you share the video url? Can you test with https://videos.john-livingston.fr/w/qqNQwFDerUB1KnFA6N6Jbi ?

Could also be an issue because of some of your custom CSS.

[MattyBoombalatty]

Whoops, not used to commenting on Github haha. Sorry about that.

Anyway, the media queries don't seem to work in the LiveChat plugin custom settings. I don't have any custom CSS that would impact its functionality in my theme either.

[MattyBoombalatty]

It does happen on your video as well. I think on mine it moves the focus down to the input box because it's set lower than on yours due to my CSS. However if you tap on the video on your instance, it does auto-focus the input box.

[MattyBoombalatty]

You can use this as a test from my end.

https://nicecrew.tv/w/r1K6WtK4g8DE9uNnboy6t1

[MattyBoombalatty]

I'm not sure how to push a commit to Github (I only am familiar with Gitea) but just add this to _container.scss and rebuild. It isn't perfect but allows for better chatbox sizing.

/* Media query for mobile devices */
@media only screen and (max-width: 50vw) {
  #peertube-plugin-livechat-container converse-root {

    converse-muc {
      min-height: 62vh;
      /* 100vh - 30vh for video = 70vh remaining */
    }
  }
}

/* Media query for tablets in portrait mode */
@media only screen and (min-width: 50vw) and (max-width: 75vw) {
  #peertube-plugin-livechat-container converse-root {
    converse-muc {
      min-height: 62vh;
      /* Slightly less to account for other elements */
    }
  }
}

/* Media query for tablets in landscape mode */
@media only screen and (min-width: 76vw) and (max-width: 100vw) {
  #peertube-plugin-livechat-container converse-root {
    converse-muc {
      min-height: 62vh;
      /* Assuming more height can be used */
    }
  }
}

[JohnXLivingston]

The vw unit means % of viewport width. Usually we do not use this unit in the media queries. For example max-width: 50vw would mean "if width is lower than 50% of the width", which make no sense. It should use pixels as units.

[MattyBoombalatty]

It works but it could be better. I will do more development this evening.

[MattyBoombalatty]

Here, this works a lot better for the majority of mobile devices while leaving desktop more or less the same. (disregard the other CSS)

#peertube-plugin-livechat-container converse-root {
  display: block;
  border: 1px solid black;
  min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport.
  height: 100%;

  converse-muc {
    min-height: max(58vh, 400px);
  }
}