Major frontend redesign

[ghost]

Redesign v1

Hi! I've been using SyncTube for two weeks or so and noticed that most of the design was ported from CyTube. Thought there were some ways to improve the UI to make the user experience more into something that people are accustomed to (things like Netflix Party or Twitch). Currently there's a live version here: 149.28.243.90:4200 that will be up for a week or so. I have a more in depth explanation of some of the changes below and feel free to ask me any questions you have!

Almost a complete rewrite of the stylesheets

As I was going through the CSS there were a lot of things that were repeated from CyTube that weren't best practice. I tried to simplify things by mirroring the structure of the HTML behind it.

Make des.css primary stylesheet and remove CyTube, mobile view, and navbar styles

These were unnecessary due to the redesign, the idea is to have one stylesheet for the design and another for whatever custom CSS the user wants to use.

Remove mobile view, split, extend player, swap, video resize

Most of these video resizing features can be replicated by resizing the window. Mobile view is the equivalent of F11 for desktop users and didn't reflect the way users use video platforms (thinking YouTube/Twitch).

Though the one feature that could be useful was swap though this can be changed by a simple CSS declaration now as the UI is based on a grid. Or a simpler implementation could be sought out by, again, just changing the grid-area properties.

Remove chat timestamp

Copied from CyTube but it looks sooooooo much cleaner without it, wasn't really necessary either as the users are watching it in real time. Also every service I checked seemed to keep with a similar ethos (YouTube/Twitch again as well as Netflix Party).

Remove navbar

The redesign made this unnecessary, was able to move functionality into more fitting places.

Migrate from Glyphicons to Ionicons and change icons to more better reflect button functions

Moved away from Glyphicons in favor Ionicons. One of the big reasons was accessibility. Also changed some of the icons out to more accurately represent the function they performed.

Migrate from Play to Inter

More readable display font.

Change template url

While the current example video is visually really cool, the flashing back and forth carries the risk of causing seizures for users with epilepsy. I changed it to the first episode of this show here. Or if you want something more visually aesthetic I would suggest this video here.

Change common CSS properties to CSS variables

This was to make theming easier, all the user needs to do to change certain things now is just change the variable in their custom.css. I was also planning on making a light theme as an alternative to the current dark theme.

Add SimpleBar

Standardize the scrollbar across panels. Currently I was only able to get it in the main section (which was thankfully the only place it was needed) but want to try to also get it working in the messagebuffer and smileswrap sections as well.

Thank you for taking your time to read this and keep up the good work!

[aNNiMON]

Hi @aus-tin, I would like to make a few suggestions since I'm CyTube user for almost 5 years.

1. Some elements distract from the video. Blue bright stripe of the active item and huge connection status. I watch videos mostly at night, so bright elements can blind eyes. Connection status isn't very helpful item, it would be nice to replace it with an icon to the right of online counter

2. Split, expand player and swap layout were helpful. Here's how I use my instance of SyncTube on laptop 1366x768: I scroll down a bit to hide the top menu and expand the player so that there is minimal space for the chat (I prefer video over chat). Sometimes I need to open telegram or any other app for few minutes: I simply narrow down the player and continue to watch video. With you layout I can see small part of the first item in playlist, I can't expand player even more, I can't narrow it down: If I want to open telegram I see only left side of it and it's not what I want You suggest to operate browser's window size, but I almost always use browser in full screen and don't like to keep one tab as separate window.

3. Timestamps sometimes usable. It would be nice to have settings with options: [Full date, HH:mm:ss, HH:mm, None]. Your idea with two lines: [User row]/[Message row] very good, so it's possible to put the timestamp in first row: [User row :: Timestamp]/[Message row]

Other elements in your design very nice. It looks cool! :+1:

[ghost]

Understood! Will work on implementing the features you listed back in.

1. Will make the connection status and current video indicator less jarring for low light situations.
2. Going to re-implement split.js and swap (though extend has essentially the same functionality as split.js so will hold back on this for now).
3. Will re-add the timestamps with a better format. HH:MM:SS has some problems layout wise but I will check what is commonplace for messaging apps and update with that!

Thank you so much for your feedback, knowing how SyncTube is actually used is super helpful! Will update soon!

[RblSb]

Hi, thank you very much for contribution, really shocked to see something like this here. Firstly, i agree with @aNNiMON points mostly, but i think expand player thing can be just as hotkey in such use case. But split and swap are useful features for me too. About other changes:

Remove mobile view, this is the equivalent of F11 for desktop users

Well, this is feature for mobile browsers site fullscreen for less distraction, i guess this can be removed. But mobile layout in your redesign requres changes. Current mobile layout | With keyboard | Redesigned So, between video and messagebuffer with input line should be minimal distance, all other buttons can be after or before this viewport. First option for this target is reversion of chat and video sections for mobile layout (if video is above of chat, then input focus will scroll page down). But seems like your chat implementation doesn't have such problem, so alternative solution - leaving chat under video, but moving other things below or above, for example like this. We can also hide online / leader panel when soft keyboard opened to get more content space. In short, my request is video, input and 1-2 messages in 9:16 screen ratio with opened keyboard on smartphones.

Remove navbar The redesign made this unnecessary, was able to move functionality into more fitting places.

This is second thing that worries me. I feel like removing navbar makes it more difficult to add further features (aka geeky option buttons) to your design. Specifically:

• There is only one context menu with all these settings
• There will be "swap" again, you also want to add theme option, i'm thinking about adding language selection, etc. Navbar has some nice separation and stays in place outside of player controls for all of that rare-to-use stuff.
• Login/logout is not something useful most of the time, and again, can be moved inside context menu, which size is problematic
• In theory plugins api can be extended to add menu items to some place

This is reasons why i think something like navbar is decent here. We can do not show it by default and make something like "^" button in place of login/logout to show/hide navbar above video. Another alternative i can think of is gear button somewhere with some modal and all that configuration inside.

Remove chat timestamp

We can also add this as title="18:42:12" in` of messages for now and think about alternative / possible user option after.

And last thing is browser compatibility: .more button doesn't work for me in Firefox 77. Also would be nice to know minimal browsers support, i guess this would be better to see in readme after such frontend update. And again, thanks for your time and all the work you've done.

[ghost]

Redesign v2

Okay! So I amended the original commit with the following updates. New example is here: http://155.138.252.49:4200/

@aNNiMON

1. Low light design

The active video indicator has been changed to a left accent border and the connection status has been changed to just the text being green. I eventually want to move it next to the online counter as you indicated though the element is connected to the message buffer so this will take a little more time.

2. Swap and Split

These have been re-implemented. Since the new layout is based on a grid I opted for the the more current successor of split.js, split-grid. Swap is also back under the options panel (where the more button was previously).

3. Timestamp

I ended up keeping the HH:MM:SS format in favor of the possibility of adding an option to change the format in the future. Moved it to the first line like you suggested.

@RblSb

Mobile View

While mobile view is a useful feature, allowing SyncTube to work like a progressive web app may be a more elegant option. Bandcamp is known do do this, try going to this link on your phone and add the page to your home screen to see the differences. I also think this better suits SyncTube as a one channel web service using it more like an app.

Plus this would work on both iPhone + Android, currently mobile view only works on the latter.

Chat

As for chat, I like the idea of leaving chat under video, but would prefer to not move the html around. Maybe allowing the things in between to "collapse" would be a simpler solution (with a drop-down button for toggle) while using the native functionality of the "collapse" function.

Navbar

So the reason I removed this and mitigated the features was due to the structure of the html. Optimally navigation/headers should be reserved for actual navigation (a big part of this is for accessibility reasons, and since there is only one page it made sense to move the features elsewhere). LOVE the idea of a modal though. One problem CyTube has is how unwieldy its options have gotten with almost too much to change. So I think a single page modal would work well! Let me know what you think!

More button

This is working now and has been renamed to "options". The problem was with my CSS only implementation so I just opted for a simple 18 line script in Buttons.hx.

Side note

Currently split-grid is being called in index.html instead of Split.hx and Buttons.hx I'm still working my way around the language and thought that no implementation was better than a messy one. Currently the splitInit() code is commented out, @RblSb since you have more experience with this would you be able to transfer the initiation script from index.html over? The documentation for split-grid is here if it helps!

Thank you and let me know it you have any more questions or suggestions!

Going to start working on the mobile version of chat next!

[RblSb]

allowing SyncTube to work like a progressive web app may be a more elegant option

Interesting, but there is some problem: PWA requires https. Also, home screen icons is meh :) About https, this will block all http raw media sources and also more problematic to run locally. Currently cannot even fix wss connection on heroku. Anyway, already found android browser with fullscreen feature and PWA support can be added someday, so FS-button on page is not needed.

Maybe allowing the things in between to "collapse" would be a simpler solution

Well, i think scrolling is little easier than showing/hiding controls and playlist for user, but some button next to the leader button can be fine too (don't know about some other place, because separated lines of collapsed content between chat and video still eats space that i want to keep). But in case of hide stuff button mobile gui can be less clear i think. With current layout moving two divs after chat are enough tho and it works nicely already.

LOVE the idea of a modal though

Ugh, i think this is actually not that good, because you still need to push modal button to some place and modal hides almost the entire screen while open. So i still really miss header / menubar. There is another two points for it:

• This will move video nearer to vertical center on desktops and creates space for minor buttons like logout.
• Not all urlbars on mobile browsers perfect as Chrome Mobile, so scrolling page down on mobiles to hide url bar will hide small part of video element too. So, instead of adding padding, why not add some menu? =)

Currently the splitInit() code is commented out

This is fine, can fix at merge stage. Looks cool.

[aNNiMON]

@aus-tin wow, now it's perfect! Thanks! I'll try to switch to your branch in my synctube instance and test it a couple of days.

[aNNiMON]

Well, after three hours of testing I have some suggestions:

• Clear chat button next to the smiles button is a bad idea. Logout next to the Leader button isn't good too. These two (destructive) buttons are not often used, why not to move them to popup panel or something? Like this:
  Gear icon now switches between chat and settings panel. See it in a demo:
  https://i.imgur.com/3RgrXMt.mp4 Look @RblSb, there is a place for your settings :tada: It should look good on both layouts.

• On very long titles, controls are moved to a new line. There are two options: limit the title to a single line with ellipsis, or just set grow/shrink for #currenttitle and .controls. Don't forget that playlist item duplicates this title, so we can easily truncate one of them (current or playlist entry).

• My very first suggestion with placing connection icon next to online counter was bad. I have noticed that current implementation puts Connected status to the very beginning of the chat and Disconnected to the very end. This is convenient.

• Custom scrollbar should be applied for chat too.

[ghost]

Good thoughts! Will apply changes soon, really like the idea of putting the settings in the chat since it gives it more room to breathe + doesn't cover the screen. Is this design alright with you @RblSb, I can put the header back but I also think @aNNiMON's suggestions work well. Would love to hear your thoughts!

[RblSb]

Yay, nice solution. Then i'm only concerned about mobile version. Do you ok with making player controls / playlist as separated components and move them around, or have some position options for show button? Also, Leader at such center seems strange, i think aligning it to the right side before gear is little better?

[ghost]

Think I'm going to go with your method of simply moving the controls & playlist below the chat. While I'm not too keen on moving the html I also don't completely like my idea of hiding things. Going to try and find a flexbox implementation but if that doesn't work I'll just write a script for it.

Had the same thought about the leader button. Currently it will be aligned to the right next to the gear.

[ghost]

Redesign v3

Current example: http://149.28.247.236:4200/

Changes

Settings

Moved logout and clear chat to settings panel, settings panel is now located in the chat area. Added different sections for controls (currently chat label is showing because I'm assuming there's going to be more chat features than "clear chat"). Also, am planning on adding button toggles eventually but it can wait for now. Settings panel closes when logout/login and clear chat are clicked so user can see changes.

Currently playing

The currently playing title is now truncated on desktop while on mobile it creates a newline.

Scrollbar (not working)

I had tried this originally as well by wrapping the messagebuffer but couldn't get it to work without breaking the chat from adding new posts to the bottom. We could use ::-webkit-scrollbar { display: none; } to hide the scrollbar but this may just take some more time.

Chat (mobile)

Okay so for this I just reverted it back to the old layout with the chat on top and video on bottom. While I really like having the chat right under the video I think there may be some better ways to implement it. We can probably think this over some more before making a decision (maybe having chat be an overlay that can slide up from the bottom?)

Let me know if there's anything else!

[aNNiMON]

@aus-tin just switched to a new v3 design, everything is fine!

I don't know how to stylize scrollbar on Chrome, but this works on Firefox:

#messagebuffer {
  scrollbar-color: var(--border) #111;
}

Found small issues:

• Horizontal scroll after shrinking the chat: https://i.imgur.com/jqVQYV7.mp4
  • When you hover on playlist item buttons (next, lock, remove) the title appears with Added by instead of the title of hovered button.

[ghost]

Example has been updated with fixes

• Applied the changes to scrollbar but it seems that it only works for firefox currently so I also applied the ::webkit-scrollbar styles which, while have slightly wider support, have been depreciated by the W3C. These can both work as temporary fixes for now.

• Fixed the horizontal scroll issue

• Fixed incorrect title tags (this seemed to be persistent in the current version as well, thank you for noticing!)

[Tygrain]

@aus-tin , as a user, I am not particularly familiar with the original CyTube, but I really like your last redesign, thanks!

[RblSb]

@aus-tin some other things you want to do? Also please do not force-push if you can, i can squash your commits anyway.

[ghost]

Understood, I think that's everything! (Sorry about the force pushing, wanted to amend the original commit)