Builtin Converse.js: Better styling

[drequivalent]

1. Disable the avatars. They are always empty, they serve no purpose and their column steals the vertical screen space.
2. Also, that horizontal scroll on the message box has no reason to exist.
3. Also, the close button is too large, and the empty bar that it's on 1) serves no purpose 2) seems to reside ON TOP OF the chat log frame (which causes first messages to be visually cut off, and generally looks terrible) Make it more subtle. Or get rid of it completely, actually.
4. Let the chat window take all the remaining space on the side of the video

5. Use full Unicode fonts.

6. Don't destroy the chat client when the window closes. Just hide it. Just so it doesn't have to connect and log in again.
7. Avoid converse.js splash screen

[JohnXLivingston]

Thanks for your contribution.

For now, I use the default ConverseJS templates and stylings. I have planned to work on the UX/UI next week.

Some responses to your points:

1. Good point. Maybe some day I will enable external connection from XMPP clients, so there might be avatars. Or I could eventually use Peertube's avatar for connected users. I think that the best solution is to hide avatars depending on the chat width. When you have a little screen (on mobiles for example), the cat is underneath the video. So avatars are not a problem. Samewhen you open the chat in a new window. So hiding the avatar column depending on the chat window width seems to be a good solution.

2. I know. I just hadn't the time to correct this for now. Will be fixed next week.

3. The problem is that the buttons have to be outside the iframe. There is definitively some work to do to make this better.

4. Same as 2.

5. Can you recommend me some standard fonts? Are the fonts used by Peertube correct? (for now, I'm using ConverseJS's fonts).

6. I have to think about it. It can have some drawbacks and/or bugs. Maybe adding a «minimize» button? To let the user choose to close or minimize? Normally you shouldn't be disconnected when closing and reopening the chat. Are you?

7. That's on my TODO list. I already have a logo for the splash screen : https://github.com/JohnXLivingston/peertube-plugin-livechat/blob/main/public/images/logo.svg

Just a question about your screenshot. The button «open in a new window» is not here (it should be on the left of the close button). Have you disabled it? Or is it a bug?

[Horhik]

So, I made one shitty hotfix. It is used as a custom code to add to your peertube instance. Maybe this will help you somehow.

let first = true
setTimeout(() => {

let chatOpenButton = document.querySelector('.peertube-plugin-livechat-button-open')
let chatCloseButton = document.querySelector('.peertube-plugin-livechat-button-close')

let ccb = chatCloseButton.cloneNode(true);
chatCloseButton.parentNode.replaceChild(ccb, chatCloseButton);
// replacing "close chat button" to remove eventlisteners

// when "open chat button pressed"
document.querySelector('.peertube-plugin-livechat-button-open').addEventListener('click', (event) => {
    document.querySelector('#peertube-plugin-livechat-container iframe').style.display = 'block'

    document.querySelector('.peertube-plugin-livechat-button-open').style.display='none'
    document.querySelector('.peertube-plugin-livechat-button-close').style.display='block'

    document.querySelector('#video-wrapper').style.justifyContent = 'revert'
    document.querySelector('my-plugin-placeholder').style.flexGrow='1'
    document.querySelector('#videojs-wrapper').style.flexGrow='0'
})

// when "close chat button" pressed
document.querySelector('.peertube-plugin-livechat-button-close').addEventListener('click', (event) => {
  if(document.querySelector('#peertube-plugin-livechat-container iframe')){

    document.querySelector('#peertube-plugin-livechat-container iframe').style.display = 'none'
    document.querySelector('.peertube-plugin-livechat-button-open').style.display='block'
    document.querySelector('.peertube-plugin-livechat-button-close').style.display='none'

    document.querySelector('#video-wrapper').style.justifyContent = 'center'
    document.querySelector('my-plugin-placeholder').style.flexGrow='0'
    document.querySelector('#videojs-wrapper').style.flexGrow='1'
  }
})

document.querySelector('#video-wrapper').style.justifyContent = 'revert'
document.querySelector('my-plugin-placeholder').style.flexGrow='1'
document.querySelector('#videojs-wrapper').style.flexGrow='0'
}, 5000);

[Horhik]

Can you recommend me some standard fonts?

Just use sans-serif on the first place for messages and titles, pls

And to hide this black gap above chat, you can set

height: 0px;
z-index: 10;

for .peertube-plugin-livechat-buttons

BTW, are you planning to make converse.js styling more available and configurable?

[JohnXLivingston]

Thanks @Horhik , your «shitty hotfix» give me some leads for a better UI. I'll look into this further next week.

BTW, are you planning to make converse.js styling more available and configurable?

I plan to write some custom ConverseJS templates, and rewrite the CSS. I'm willing to use some Peertube's colors. I have to find a way to reuse colors from the current theme. I don't know yet how to achieve this. I'll try this next week.

When you say «more available and configurable», you mean for the plugin developers, or for the instance admins (to override styles)?

[Horhik]

When you say «more available and configurable», you mean for the plugin developers, or for the instance admins (to override styles)?

I mean "for the instance admins"

Glad to hear that I could help you with UI :)

[JohnXLivingston]

I mean "for the instance admins"

I have to think about it. Anyway, it will be the last thing to do. Otherwise, it can make new developments harder (to not break backward compatibility once it is available).

Glad to hear that I could help you with UI :)

Yes, i'm not a CSS expert :) I searched for some UI/ConverseJS expert to contribute several month ago, but I did not find one. So I'll have to do this myself.

[drequivalent]

1. Does the stream chat really, I mean REALLY need avatars? I think they will just steal attention and, again screen space. All we really need is to indicate if
   • One is the instance admin
   • One is the streamer and there fore chat admin
   • One is registered and logged in on the instance
   • One is logged in with an outside Fediverse account (at which point may be just use full or abbreviated instance domain, if you are even going to include such functionality. Or, okay, this way, avatars make sense - but maybe hide them in pop-up?)
2. Nice one but please make it customizable, so the instances can have their own logo and style appiled.

And yes, I disabled "open in new window", I don't see too much point in it.

[JohnXLivingston]

@drequivalent , i'll do my best to take your remarks into account.

[JohnXLivingston]

Here are some «work in progress» for the new styling: https://videos.john-livingston.fr/w/rQqh7UJRXDst6bAkJKd6Yy And for the fullscreen version: https://videos.john-livingston.fr/plugins/livechat/router/webchat/room/d1372116-fd32-48f7-b83e-c31029465a14

This is highly work in progress, and will be updated frequently. For now, there are:

• using default Peertube theme's colors. Next, i'll try to auto ajust to the user's current theme colors.
• hide avatars when width < 576px
• larger occupants' sidebar when width < 576px
• new splashscreen
• fonts = "Source Sans Pro", sans-serif. Is this ok for russian?
• more to come...

Feel free to comment.

[JohnXLivingston]

So, I made one shitty hotfix. It is used as a custom code to add to your peertube instance. Maybe this will help you somehow.

@Horhik , I tried to include your ideas in this commit: https://github.com/JohnXLivingston/peertube-plugin-livechat/commit/5f3e8f08a2885285fed4eea91c5a764ae5352355 It seams that your justifyContent = 'reverse' is not a valid value. But it is not necessary. Also, changing the flexGrow from the videojs-wrapper is also not necessary ('0' is the default value for this attribute). I just changed the plugin placeholder flexGrow when the chat is open.

You can see the demo link in my previous content, it was updated.

I have a bug for some window dimensions. The chat goes beyond the right. See screenshot: Not sure it is related to this commit. But if someone has a clue...

[JohnXLivingston]

I'm trying a new feature: close button, and «open in new window» button are now smaller when the chat is open. Tell me what you think. Is this too small? Is this better?

Available on https://videos.john-livingston.fr/w/rQqh7UJRXDst6bAkJKd6Yy for testing.

PS: I don't want to use the z-index trick (see comment https://github.com/JohnXLivingston/peertube-plugin-livechat/issues/72#issuecomment-962179640 ), because it can hide some content (for people using external webchat tools).

[Horhik]

Also, changing the flexGrow from the videojs-wrapper is also not necessary

Are you sure? As I can see on your test site, the default value of flex-grow is 1, but, anyway, if I'm closing the window the buttons are on the left with flex-grow 0 that's less intuitive than buttons which constantly sticking to the right top corner that is possible to do with flex-grow 1 when chat is closed

[JohnXLivingston]

Are you sure? As I can see on your test site, the default value of flex-grow is 1,

Hum, you are right. I must have made a mistake. I missed the CSS that set the flex-grow to "1", and I thought it was using the default CSS flew-grow value ("0").

but, anyway, if I'm closing the window the buttons are on the left with flex-grow 0 that's less intuitive than buttons which constantly sticking to the right top corner that is possible to do with flex-grow 1 when chat is closed

Personally, I prefer it the way it is now. If other people have an opinion, I'd love to hear it.

[JohnXLivingston]

New feature: auto color detection, depending on the peertube's current theme. Available on https://videos.john-livingston.fr/w/rQqh7UJRXDst6bAkJKd6Yy for testing. NB: the page needs to be refreshed after changing the theme (or close/open the chat).

[JohnXLivingston]

I'm almost done with the new styling. The beta version is available here (use private navigation to avoid cache issue): https://videos.john-livingston.fr/w/rQqh7UJRXDst6bAkJKd6Yy In this forum post (in french), there are some links to the fullpage result, with several peertube themes (I picked some at random): https://framacolibri.org/t/refonte-de-linterface-du-plugin-de-tchat-besoin-de-vos-retours/13504/23?u=johnlivingston

[JohnXLivingston]

I'm closing this issue. Almost all points are fixed in v5.0.0, that will be released very soon (today or tomorrow). If you have any comments on the v5.0.0, please open a new issue.