Initial Design
Every year a group of my friends upload small (file size), trimmed (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.
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.
User Profiles
A 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.
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.
User Avatars
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.
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.
Uploaded Videos
The file size can be limited via the server source code and is up to the developer to set.
In development, the limit is set to 50MB as plenty of disk space was available.
The video upload page can be accessed from the /profile page.
An upload button will appear under the user avatar which redirects to the aforementioned page.
To upload a video, simply drag and drop a video file into the upload box and the server will do the rest.
In development, the limit is set to 50MB as plenty of disk space was available.
The video upload page can be accessed from the /profile page.
An upload button will appear under the user avatar which redirects to the aforementioned page.
To upload a video, simply drag and drop a video file into the upload box and the server will do the rest.
Responsive 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 (1280p and higher), 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?
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 (1280p and higher), 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 making the logo align perfectly with existing logo in the content area, on all viewport sizes. Not to mention you have 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.