Designs
Video Feed
Screenshot of the main page showcasing the global video feedEvery year a group of my friends upload small (file size), trimmed (shortened video length) videos to Discord.
We'll call these videos "clips". These clips can show anything from a persons blank desktop to a video game.
The layout I wanted to achieve is YouTube's main page. Dynamic navigation bar on the left, search input at the top and video feed in the main content area. The video feed in the main content area should be engaging and interactive.
When a video is hovered, a short preview should play with no audio.
To avoid rendering the full video for every video element, FFMPEG is used to create even shorter, downscaled videos with no audio. This process happens on the server after the video is uploaded.
The Navbar
One noteable feature that may never get noticed is the navigation bar. It contains a menu of video categories defined by the server, as well as a list of users that the authenticated user subscribes to.
Depending on the width of the viewport, the navigation bar must switch between an off-canvas and collapsable style via a toggle button.
On XL screens (1280px width viewports), the navigation bar must stay visible at all times. When the navbar toggle is clicked, menu text is hidden such as usernames and category names leaving just icons. Simple enough, right?
On smaller screens, the navigation bar must be hidden by default and when the navbar toggle is clicked, it will toggle that visiblity.
The difficult part about this is having to consider window resizing allowing conversion between both styles seamlessly without any extra user interaction.
Consider also adding a sliding animation to only smaller viewports where the animation only occurs when the toggle button is clicked, and not when the window is resized.
User Profiles
Screenshot of a user profile showcasing a video feedA user's profile will contain a video feed as well as certain buttons under the profile avatar. The buttons displayed will depend on if that profile belongs to the authenticated user.
If the profile doesn't belong to the authenticated user, a button with a heart is displayed, allowing that user to "subscribe" to that profile. This adds the avatar and username of the profile to the navigation bar menu where the authenticated user can easily access the profile.
If the profile does belong to the end-user, three buttons are displayed: video upload, account settings, and log-out.
Profile Pictures
User avatars, aka profile pictures, support various file types. I believe that modern websites should support animated avatars as it adds just a little bit of extra potential in creative expression and interaction with audiences. Although I do understand it would be difficult to moderate.
To upload a new avatar, simply upload an eligible file type to the avatar element and the server will process the rest.
This is done by converting the uploaded file into Base64 format then store as a blob in the database for persistence. The file is also saved to the server disk as a backup for fast retrieval.
Videos
The file size can be limited via the server source code and is up to the developer to set.
The video upload page can be accessed from the /profile page when the user is logged-in.
An upload button will appear under the user avatar which redirects to the user's video management page.
To upload a video, simply drag and drop a video file into the upload box and the server will do the rest.
Deleting a video is simple as well. The video is removed from the server database and the file itself is moved to the recycling bin for safe-keeping. After all, there may be a time where a video is accidentally deleted and needs to be recovered.