Video Card UI Overhaul

[dammitjeff]

Mentioned here: #380

With the dates system sorted, and more game information being available, work on the video card overhaul is officially underway.

This is still heavily in progress and won't be done for a while, but progress is officially started. Most of the code will simply be brought over from the existing CompactVideoCards.js . I distinctly recall that one-click options for tasks such as toggling visibility and sharing links were a big priority in this redesign. I think I manged to figure out a solution. By default these options are hidden from the main dashboard view, but revealed upon hovering on the thumbnail of the video. I think it looks really nice, and makes for a much cleaner interface.

There's still a lot that needs to tested, and some things need to be reconsidered to work with the new design:
• Selecting multiple videos
• Editing game information (Date, Titles, etc)
• Appearances in GameVideo.js (since we won't need the game name in each thumbnail anymore)
• Appearance of Game Detection Card

I'll keep working at it, just wanted to inform that its officially being worked on haha

[ShaneIsrael]

Definitely an improvement over the existing styling. I think editing game information could be an option in a hamburger menu somewhere? Could also be done in the preview modal, possibly reworking some of control layout in that.

Overall though I think it's a fantastic start.

[dammitjeff]

Awesome! Yeah this is the perfect time to implement hamburger menu now with the new overhaul, Makes for a much cleaner layout.

I recall something was said about spaces being converted to underscores to prevent injection attacks, will there need to be any tweaking made for this to still work with our new design? Since these show spaces in between words.

[ShaneIsrael]

That's only for uploaded file names. Doesn't matter for files that are scanned in (at least it shouldn't) and definitely doesn't matter for setting the name in the UI as that is an admin action.

[dammitjeff]

Okay been working on this for a little bit more, added some color tweaks that I'm still deciding if I like or not.

• I used the fast-average-color library to grab a color from the game logo and turn down the brightness down to 20%. It can be tweaked but good for proof of concept.

• Removed the circular mask of the game icons and just let it be a square. Too many game logos were being poorly cropped.

• Also moved the date of the clip to the bottom of the info, instead of floating up top. The view count is now moved to the thumbnail. I think this looks much more organized!

•Used framer-motion again to add a bit more liveliness to the cards when loading in. I might add some sort of blur down the line to let thumbnails load in gracefully if they're taking too long, but we'll see.

• The kebab menu is also now implemented, you can see it in the gif. Most settings and options will be moved here. This requires a rehaul to actually match the rest of the Fireshare thememing.

Also should probably mention I mentioned the app in my last upload here! Super proud of how far this app is coming along :) Hopefully more people check it out with the recent plug.

As always you're the boss here so if im in the right direction I'll keep going but I'd love to hear any notes from you if you have any thoughts or changes you'd like to see.

[ShaneIsrael]

@dammitjeff
hmm.. I'm kinda conflicted on the background colors. I think it conflicts with the blue fireshare background. Possibly a flat black with some opacity would work well? That way text is always super readable, with the colors it can be hit or miss sometimes. I think I'll leave it how you have it for now and try it out myself to see how it looks and maybe some slight tinkering to brightness. I want to wait to check it out myself to make a final call on that.

Overall though I think it looks really good where it's at. May need some tinkering here and there but nothing is perfect right out the gate so that's fine. I do think it looks a lot better than what it is replacing.

Also, had no idea you were a big time youtuber! That's awesome I'll be sure to watch that video tonight. Also sorry for the slow response, been a bit under the weather lately.

[dammitjeff]

No worries! Just happy to hear the project is alive and well :)

I took back some of your feedback. Black with 40% opacity does seem to remain a lot more consistent, you might be right there.

I also asked my community and it seems people agree.

I also added an extra QOL improvement. Double clicking on the title of the card allows you to quickly edit the title. It's incredibly intuitive. Leaving the field blank just defaults to the original file name :)

Up next, this edit page needs to be rehauled, it feels out of place with the rest of the design now, so i'll have a look at it soon.

[dammitjeff]

The Game suggestions clips have now been reconfigured to fit the new grid layout. They're now inline with the rest of the cards, so that way every card is always the same size. Thumbnails for video clips with weird aspect ratios are also cropped to 16:9 too!

I also decided to redo the grid layout for the scaling. I'm sure you noticed it was always a bit wonky, I had a look and for some reason it was using MUI grid 'spacing' , which doesn't proportionally scale since it has fixed gutters.
CSS Grid with 'auto-fill + minmax()' is a much simpler approach to what you were trying to do and it feels MUCH more responsive. When you give it a try i think you'll see what I mean, it scales much better now.

[ShaneIsrael]

@dammitjeff Good stuff! Definitely prefer the non-colored cards. Am glad to see you retained the click in title to rename functionality. The modal definitely needs some work to fall in line with everything else. It seems like it is in a pretty good spot for some testing right now so I'll try to get a deploy going to my dev site to check it out. I won't merge the branch just yet until you think its ready enough for that.

[ShaneIsrael]

Actually nevermind. I won't be able to push it to my dev site until its merged. I thought maybe I could pull your branch into my build action but I guess not.

[dammitjeff]

I can build it and send a public link here if you want to try it for yourself? I have my own test domain.

Two things that still need work before i feel good enough to merge to prod:

1. Edit button
2. kebab menu (need to figure out what options we'd want, delete, edit, etc)

[dammitjeff]

Preview can be accessed here: https://dev.saint-chrome.com/#/testing
default admin credentials. test and upload as much as you need, let me know what you think. Test with ultra wide clips. long file name clips, long game names, whatever. :)

Right now it's defaulted to its own separate page until I can ensure it can be safely merged to the rest of the site. But yeah in the future this will be migrated site wide

[ShaneIsrael]

@dammitjeff played around with it a bunch on your preview site. Definitely like the look and feel. I uploaded an ultrawide clip and the cropping works great. Definitely like having all the cards the same size.

[dammitjeff]

Oh man, lot of changes here but I'll try to be thorough here.

• The kebab menu is now complete, here are the options I went with. Think it strikes a good balance of everything.

• The delete and edit page modals have been redesigned entirely. No functionality has been changed. Just cleaned it up a bit to match with the new cards we have.

I'm particularly proud of the UpdateDetailsModal.js, it was almost entirely redone and now also has a place to edit the tagged game. I also replaced the old MUI calendar with a more customizable react-day-picker that in my opinion matches the theme perfectly. Night and day difference compared to before.

• Added the transcoding event to be pulled from a single video id. this required an entire rewrite of the way queues of videos would be transcoded and logged to TranscodingStatus.js, but it was well worth it. Makes it way easier to manually transcode a single video. Multiple videos can be added to be transcoded and will just be added to the end of the queue now.

• I also refined the mobile experience as well. When the page is detected to only fit one video per row, the page scales so the sidebar hides, and the video cards take up the fullscreen space on the site, with previews, titles, and all other info clearly visible. SO proud of how this part came out honestly, especially since I know the mobile experience was a bit of a paint point in the past.

After all of this work, I'm ready to pass it over to develop for testing. Soon as I I get a decent clear to move forward, I can work on switching everything over to the rest of the pages. :) Excited to hear what you think.

[ShaneIsrael]

@dammitjeff Not going to lie, I love the updated modal. I think that looks fantastic. Just from the screens it looks really good.

Added the transcoding event to be pulled from a single video id. this required an entire rewrite of the way queues of videos would be transcoded and logged to TranscodingStatus.js, but it was well worth it. Makes it way easier to manually transcode a single video. Multiple videos can be added to be transcoded and will just be added to the end of the queue now.

Oh nice! Can manual transcode be triggered even with transcoding disabled? I would assume so.

[ShaneIsrael]

@dammitjeff Noticed a minor issue with scrollbars. Duplicate scrollbars show up and one of them (the inner one) I think is due to the toolbar height not being calculated into the height of the page.

And here it is when you scroll it all the way down.

You'll see it lines up perfectly with the toolbar height.

One other potential issue I noticed was I have a video that was transcoded only to 1080p because at the time I only had 1080p as a selected option. However, now I have 720p and 480p selected but when I tell it to kick off a manual transcode of that video, nothing happens. I haven't dug into the code yet but I'm guessing it sees that the video was transcoded and does nothing instead of seeing that "oh, its missing the 720p and 480p options" and transcoding into those now requested formats.

Other than that, I don't see any issues with the update. I think if those 2 things can be resolved you can remove the /#/testing page and move that format to the rest of the app and if anything else comes up it can be tackled as it happens.