How to create and customize a Public User Profile | JetEngine

hi everyone kate from krakow block is here and welcome to this new video i know that a lot of you simply love using jet engine plugin as it's got so many cool features that allow you to create complex dynamic websites and today i'd like to cover one of such features it's pretty simple but at the first glance can be kind of complicated and i'm talking about user profile builder functionality but guys before we proceed any further please make sure to watch the how to work with profile builder video made by paul from wp touch as he did a really great job on explaining how to import and use the built-in presets how to customize the user account and how to add the front-end functionality to the cpt so that users could submit their posts from the front end this is actually one of the most wanted topics for creating complex dynamic listing websites and today i'd like to cover a couple of other very useful features of the user profile builder such as how to create a public user account how to edit the user info from the front end and how to create users listing and put it on a separate user speech so for some of you this might sound too complicated and for others too simple but that's what we're going to be doing today and also guys if you haven't subscribed to our channel yet please don't hesitate to do so and like our videos so we can know that you support the things that we do so guys shall we get started [Music] so today i'm gonna be working with this cool finder.me real estate dynamic website template that comes with all inclusive yearly and lifetime subscription plans absolutely for free to be sure that it's just what you need you can view the demo of this lovely template simply by clicking right here and as you can see it's pretty well designed and what's more important fully set up so if we want to search for anything for example we just have to choose the exact parameters and filter the results and if we want to search for another location just choose it right here filter it and there you go works perfectly fine going back to the home page we see different listings for property types for recent real estate and for trusted real estate agents so what we're going to be doing today is actually creating such listing for agents as well as creating the separate page where all of the agents can be listed like this one and we'll be creating a single agent template so that once i click on let's say this andrew i get to see his profile with photo and info of his as well as the contact details and properties that he's either giving for rent or selling and guys we'll even modify this tab a little bit together because i think it would be nice to have properties for rent in one tab and properties for sale in another tab so it's easier for customers right and what else we will do is actually let me login into this demo okay so yeah we'll be building the settings of the user profile from scratch adding them to this profile menu and of course creating this lovely form where a user or agent so to say can actually update his personal info from the front end if needed so are you ready to start okay so let's close this window and start with making sure that the profile builder and forms modules are enabled in the jet engine dashboard settings these ones are toggled on good now what you can do to make your life a bit easier is to go to the skins manager open the presets tab and import the editable user settings page for user profile configuration part you can do it by clicking on the import button what it will do it will actually add the user settings subpage to the user account and import the added user form with default fields and notification action settings i won't do it right now because i'd like to lead you through this whole process from scratch that is why first of all let's go ahead and open users section to see what their default profiles look like at the back end so let's add it andrew miller okay here we have a default information of the user like his name role contact info as well as the profile picture which can be changed on gravatar but i think it would be nice to have some additional i would say advanced fields for the user's info and to add those fields we can use the jet engine meta boxes functionality so let's go to jet engine meta boxes and add a new meta box let's put user info as the title choose the source to which this meta box will be applied to in our case it's user and in the visible add option we can choose added user and profile why because this way the fields of this meta box will be visible at the user profile page and editable from the front end too and do we need to edit the metabox link no not really okay so now let's add a couple of meta fields let's start with the photo for example yes i know that we have the default profile picture but i think that it would be much easier for the user to add his photo from the front end so label photo namer id the same photo object type field field type media i don't think that we need description here and the filled with let's make it 25 conditional logic toggled off now let's add another mata field for the phone number so label phone namer id the same object type field field type text no description filled with 25 percent as well i'll not use the character limit option but just keep in mind that it's available right here and also i'm not going to put the default value but i will make this field required good no conditional logic too okay right now i'm adding another field for the email of the user label email namer id the same object type field field type text no description filled with 25 percent and no character limit no default value field required no conditional logic now we already have photo phone email fields and let's add three more for position about me info and social icons so label position name position type field field type text and i'll repeat the same settings here as well so no description with 25 percent no limit no value is required no logic good two more to go label about me name the same object type field and field type text area description is not needed as it's pretty clear um filled with let's make it 100 percent no character limit no default value field not required and no conditional logic and the last meta field will go for the social icons this one actually will be pretty interesting as we'll be using repeater fill type for it so label social icons name the same object type field field type repeater good so basically right now we will create a group of repeater fields let's add a new field label icon name icon type icon picker and let's add another one label link name link type text great no description needed 100 with and no conditional logic okay the mata fields are ready so let's click on add meta box if we open meta boxes we'll see that it has been added right here we can either add it or delete it if needed now let's go back to the user section to see the changes let's add it andrew miller one more time and scroll a bit down right here we see a new user info section with fields for photo and phone email and position about me and social icons let's quickly fill this out and proceed to the next step [Music] [Music] so we are done with the user profile preparation and ready to start setting up the profile builder settings let's open profile builder which is located under the jet engine section as you can see some parts of the user profile builder have already been preset like the page for the user account and its sub pages my property add new property and added property these settings are directly related to the front-end post submission functionality and just like i said in the beginning if you need guidance with that please feel free to check out the video made by paul from wptots and right now we'll pay more attention to the user's profile and start with setting up the user speech so let's toggle user speech option on as you can see right here user speech select option appears in this drop down list we have all the pages of our website account home login and registration so right now we need to create a page for the list of all users in our case real estate agents that's why let's go to pages add new let's call it agents and edit it with elementor first let's open settings hide the title of the page and choose elementor full width for the page layout good now let's add the heading widget and enter trusted real estate agents in the title align it to the center and style it a little bit so the text color will be gray typography family noto sounds jp size 30 weight 700 and line height 1.25 good now let's search for the listing grid widget that will help us to pull the user data to the front end and place it underneath the heading just as usually in order to display this data we need to select the source of the listing grid the listing item as of now we have nothing to search for because we didn't create it yet so let's duplicate this tab and go to jet engine listings as you can see here we have a bunch of different listing items but they're all related to either posts terms or repeater field and we need to create one for the users so let's click on add new in listing source select users let's name it list of agents and click create listing item so in general i want this listing item to show such info as photo of user his name and position as well as the social icons of social networks he's registered on and let's start with the photo search for the dynamic image widget and drag it onto the canvas in the source choose photo under the user info section so basically this section has all the fields from the meta box user info that we've just created also guys we can make this image clickable by adding a link to it but we'll do it a bit later once we create our single agent page template as of now let's just keep in mind that we'll have to return to this point okay so now let's add a heading widget for the name of the user in our case we need it to be dynamic that is why let's add dynamic tags functionality to it so let's click on dynamic tags choose user field under the jet engine section and pick display name field from user properties and as for the context current user for current scope will work perfectly fine for us in this case and we surely can link the name to the profile page template but we'll have to do it after we create one so here's another thing to keep in mind for the future as of now we can add a dynamic tag choose profile page url under the jet engine section and later we'll select the single agent page from this list okay now we need another heading widget for position of the user we'll use dynamic text functionality for that as well so let's choose user field and pick position field under the user info section context will say the same current user for current scope and the last thing for this listing item is what yep social icons if you remember social icon's field type was repeater that is why let's search for the dynamic repeater widget that will help us to pull the data from the backend and place it right at the bottom then choose social icons meta field in the source good but as you can see it displays the info in i would say not really comprehensive manner right that is why we need to change the items format a little bit of html will help us in this case and will not only apply the icon image to the item but also make it clickable too so let's add an anchor element with hyperlink because we did specify one in the repeater field and also let's add the icon class 2. [Music] just in case guys this is the repeater field name the same one as here okay and let's style these icons so they look nice and fit the design so in general let's set the typography size to 14 and change the weight to 400 line height let's set it to 1 and color let's change it to the light gray and also set margins from right and left 10 pixels there and 10 pixels here would be fine [Music] good [Music] so our listing item is ready let's save the changes and go back to the agent speech and i'm not closing this one on purpose because we'll still have to edit it once we create a single agent template remember so let's search for the list of agents great now we can see the info but currently this listing grid shows all the users admins and real estate agents and i wanted to display only the agents that is why we need to query it a little bit let's open users query because we're querying users right not posts or terms and in the roles field specify one of the roles author in particular so this way it will show only the users was the role author you can add more roles if we wish so but i will stick to this one okay guys let's save the changes and go back to the profile builder so now we can select the page we just created from the list great the next thing we want to do is enable single user page option because we do want each agent to have their personal public page once enabled we get to see a couple of new options like single user page with the select drop down user page we write and user page tab right here so single user page option allows us to select the page that will be used as the base for this single agent template that we'll create in a few minutes so here we can select agents page as well this way we'll have a pretty nice looking url structure then the user page rewrite option gives us the opportunity to choose the way we want our single user page slog to be rewritten as a username as user nickname or as user id i'll choose user nickname and the user page tab allows us to create a sub page for user account menu customize its settings and apply a public single page template to it so first let's give a name to our subpage single agent this log is generated automatically good and template we didn't create a template yet so you know what we're going to be doing right now let's follow two templates saved templates and click on add new select the type of template page give it a name so it will be single agent and click on create template let's go to settings first and change the page layout to elementor full width okay and now we can start building the public user page that we'd like to see on our website i'll start with adding a two-column section for the information about the user or agent to be more precise in the first column i'll place intersection widget and in the very left column i'll add a dynamic image widget in the source of the widget i'll choose photo under the user info section now let me change the size of the columns a little bit good so in the right hand column of this block i'd like to put the info like name of the agent his position and about me info so let's start with the name first search for the dynamic field widget and drop it onto the canvas in the source we'll keep post term user object data but in the object field we'll choose display name under the user section in the style tab i'll choose the text color from global colors presets and as for typography the text family is notosands gp size 24 pixels weight 700 and line height 1.25 and one little thing let's change the margin of this widget a little bit in the advanced settings so i'll put four at the bottom okay now let's go for the heading widget and drop it under the name of the agent here we'll use the dynamic text functionality just like in the list of agents listing item so let's choose the user field under the jet engine section and in the field drop down select the position field the context stays the same and in the style tab i'll apply the preset text color and typography for position and in the advanced settings i'll change the margin to 28 pixels yeah 28 pixels at the bottom good now let's duplicate this heading widget and change the field in the dynamic text settings let's change it to about me great and change the margin to let's say 15 no let's make it 18 pixels at the bottom and also i'd like to add a little final styling drop in this inner section widget let's open the style tab and in the border add drop shadow let's make it almost invisible yeah like this one and move it a bit down so i guess three pixels would be fine great now let's go for the second column here on the right side i want to place the contact info of the current user we can do it by using dynamic tags or dynamic widgets functionality or we can create a separate listing item for contact info to have a possibility using it not only on the single user page but also on the single property page or anywhere else for example so that's what we're gonna do right now let's open wordpress dashboard in the new tab and go to jet engine listings click on add new in the listing source choose users give it a name like shorter agent info and click create let's add a new section and first of all go to the listing settings to change the preview width to 400 or maybe maybe 370 pixels yeah good now let's select the column and change the background color to dark blue and while we're editing this column let's change the pattern to so let's make it 40 30 50 and 30. good so let's start with adding a heading widget to the column and changing its title to contact info color white typography noto sounds jp size 20 pixels weight 500 line height 2.25 and widget's margin 13 at the bottom good let's add another heading for the phone label so color light gray typography i'll choose position preset and i guess i'll change the line height to 1.75 which is margin 5 at the right and positioning inline auto right now to save the time let's duplicate this widget and change the title to email good so the labels are ready and now we can search for the dynamic link widget and place it in between these two in the source let's choose phone under the user info section replace the read more with field value macros and go to the style tab i'll choose this preset for typography and change the line height to 1.33 the text color will be yellow on normal white on hover and positioning in line auto now i don't want all of them to be in the same line so i'll place a spacer between them and set it to 5 pixels i think it will be enough let's duplicate the dynamic link widget move it under the email heading widget change the source to email and in the style tab swap the colors so white on normal yellow on hover okay i also want to place the social icons here too so let's duplicate the contact info heading drag it to the bottom change the title to connect with us adjust the text size to 16 pixels and change the margin because right now it sticks to the upper widgets too much so at the top let's set it to 20 or maybe even 25 pixels and at the bottom 215 no let's make it 17. yeah that's better okay and the last widget in the listing item would be the dynamic repeater we can actually copy it from the list of agents listing item this one to speed up the process and adjust the margin of items in the style tab so let's make it 19 here okay let's save the changes and go back to our single agent template now we can search for the listing grid widget and drop it into the rights column in the listing type in the shorter agent info doesn't look that nice right so let's set the columns number to 1 post number to 1 as well good looks much better now ok and as i promised let's add a new section for the croco block tabs widget we're going to create two tabs one for the properties for rent and another one for the properties for sale so let's search for the tabs widget place it into the bottom section remove the third tab and firstly style them a little bit go to tabs control item and change the color to gray typography i'll use the position preset and change the transform option to uppercase as well as the line height to 1.43 and weight to 700 let's also change the text color on hover and on active to green add border type solid on active change the width to 2 pixels at the bottom so it would just underline the active tab and change the color to green too and also i think it would be nice to add a little bit of padding and margin too so padding let's make it six from top and bottom and nine from right and left and as for the margin i guess 10 pixels on the right would be just fine great guys i'm not styling the icons here because i'm not gonna use them in this design so let's return to the content tab and start customizing the tabs so first tab will make it active remove the icon and change the label to for rent in the content type we'll leave template and right now we need to choose the template that we'd like to use for this tab and as you might have guessed we don't have one created yet so let's open the wordpress dashboard in the new tab and follow to templates saved templates click on add new select the type of the template page and give it a name for rent and click create okay guys this template will be pretty simple we just need to add the listing grid widget here and choose the most suitable listing item for it i already have the listing item for the properties created let me show you what it looks like let's go to jet engine listings and open listing properties in line so as you can see here we have the featured image of the property on the left side dynamic terms widget for the purpose taxonomy dynamic field with the address metadata dynamic link for the title of the post and its permalink and another dynamic field for the post excerpt i can list for the number of rooms baths and square meters and dynamic fields for the price with the heading widget for the period info so we'll be using this listing item in our properties template in the listing let's type in listing properties in line change the columns number t1 and post number two let's make it five good we're going to query the posts by author and terms so first let's open the post query and select posts and author parameters in the posts by section select the option queried user so it would show the properties of a particular author now let's add another item for the tax query choose the taxonomy purpose in the field drop down select the options log and type the name of the exact taxonomy we need for example rant save the changes and create completely the same template bot for sale so let's click on add new page for sale create i've copied the listing grid widget and inserted it here to save the time and now what we need to do is simply change the taxonomy name to sale good and save the changes now our templates are ready and we can go back to the single agent template and apply them in the tabs settings choose the template for rent and open the second tab remove the icon change the label to for sale and choose the template for sale guys please don't worry that you don't see any info here yet that's because currently it shows the admin user info and this particular user has not submitted any properties yet so there are simply no posts to show but once we open this template on the front end as per the agent it will show the posts this agent has created okay so our single agent page template is finally ready and we can now apply it to our single agent user page in the profile builder settings good now moving on to the next options hide from menu it literally hides the single agent subpage from the account menu but keeps it accessible by the url and will enable this option page visibility i'll set it to all because this is the public profile of the agent and show this page for user role actually allows you to show it only to queried user roles okay as we already created and customized a public profile page of the user now we can finish setting up the list of agents listing item remember that we had to return to this point after the single agent template was created so let's link this image to the profile page as well as the name of the agent too in the link source choose profile page and in the profile page select single agent let's do the same thing for the name of the user we've already applied the dynamic text functionality to the title and in the link field we've chosen profile url so here we just have to choose the profile page single agent 2. good now we can save the changes what else i'd like to do before proceeding with the profile builder settings first i'd like to add agents page to the website menu to have access to this page and second i'd like to add trusted real estate agents listing to the home page just like in the demo and also add a button with a direct link to the agent's page as well so let's go to appearance menus and add the agents page to the menu save the changes and check if it works okay so let's go to the front end click on agents and we are now at the page we created for the list of agents what else we can do now is actually check if our listing is clickable as it should be so if i click on the photo of andrew i get to see his profile with the info and his properties for rent and for sale let's go back and check another user mary scott for example here you go here's her profile with corresponding info and properties of hers so the menu and listings work just fine now let's open the home page and edit it with elementor now let's scroll way down and add a new section underneath the properties first let's drop a heading widget here and change the title to trusted real estate agents in the style tab change the color to dark gray and in the typography i'll choose the heading preset okay good now let's open advanced settings go to positioning and change the width to inline auto and align it to the center good now let's search for the listing grid widget and place it underneath the heading choose the source of the grid list of agents change the columns number to 4 and the post number to 4 as well and query the users by role author good and we also wanted to add the button here right so let's search for the button widget and place it in between the heading and listing grid widgets type will stay default text will be join our agents link let's type in agents there it is now let's add an arrow svg icon after the text and change the icon spacing to 10. okay in the style tab i'll change the typography to position preset and set the weight to 700 and transform to upper keys text color i'll make dark blue on normal and green on hover and remove the background color change the padding to 0 and open advanced settings to set the position to inline auto and align it to the center to make these two stick to the sides we need to adjust the column settings so horizontal align let's set it to space between good and i just recalled one thing let's edit this listing item just a little bit open the navigator to select the column and adjust the widget space to 10 pixels okay good that's better and now let's return to the home page and save the changes let's go back to the profile builder settings to see what options we didn't go through yet right here we have the template mode you know guys it turns out that this feature is very popular with the requests to our support team a lot of questions have been asked about it already but it's actually pretty simple so it's got two options rewrites and content basically they define how the subpage templates will be processed and i'm talking about not just single user page template but other ones as well so for example if we select the rewrite option our single agent template will rewrite the content that exists on the agent's page because previously we've selected agent speech as the base for the single user public profile we did it for the url structuring purposes let's open the front end to see what i mean click on agents good so currently we are at the list of agents page and the url looks like this if i want to take a look at the public profile of the user i'll have to click on let's use andrew one more time and this way the profile builder module will automatically apply the single agent template to the agent's page thus rewriting its content the heading with the title and the listing grid of agents as you can see once we're on a single public page the url now looks like this so this is the rewrite mode and it's actually a great option to use if you have a customized user profile template let's go back to the settings if we select content option then it will just show the content of the page that you've selected as the base you see the url changed but the info stayed the same so in our case we need to use the rewrite option here we have a use page content option that will apply the page content if the subpage template is not selected okay next one hide admin bar well this one is pretty clear right it will hide the admin bar for non-admin users i'll toggle it on and the last option gives us the opportunity to restrict admin area access for specific roles okay so let's save the changes and proceed with the last thing for today creating the user settings subpage building added user form and customizing added user template these three options are directly connected with the front and form submission so the process of setting it up will be familiar to you if you have watched the video made by paul so let's go to the account page tab and add a new sub page i'll call it settings slog settings and now we need to apply a template to it right now we're going to go to templates saved templates and add a new template select the type of the template page and name it added user let's start with adding a two column section good now let's search for the profile menu widget and place it into the left column in the context we'll keep account subpage and switch the menu layout to vertical as for this style let's set the item widths to 100 percent choose the typography preset name listings and change the weight to 400 and line height to 1.5 the text color will be dark gray on normal green on hover and dark gray and active but here we'll also add the background color pale green let's also change the padding here to 18 at the top and bottom and 40 at right and left good now let's place the button widget underneath the menu we'll use this button to sign out of the account so type default text sign out link we can actually copy it from the auth link links widget okay good let's set the size medium and open the style tab change typography to name listings preset adjust the weight to 400 remove the background color and set the text color to gray on normal and green on hover set the padding here to 0 and go to the advanced tab to adjust the padding to 20 at the top and 40 on the left good and the most interesting part will go to the right column first let's drop a heading widget here and change the title to added profile choose the text color gray and typography heading preset in advanced settings change margin to 30 at the bottom good and now let's search for the form widget and place it underneath the heading here we need to select the form that we'd like to use in this template but we don't have it created yet so let's go back to wordpress dashboard go to jet engine forms and click on add new add the title edit user and start building the form itself we're going to have a pretty good amount of fields in this form not as many as in the property submission of course but still there will be quite a few so we already have the hidden field for the post id which works perfectly fine for us and the submit field that we'll surely need but as of now i'll remove it from the form because i don't want to drag it around all the time while adding new fields okay so let's delete it for now and add the first well technically the second field this one will go for the heading set the label photo no description needed and filled visibility for all apply the changes good let's add another one choose the type media name profile photo label photo no description field user access any registered user let's mark insert attachment and choose the field value attachment id good here i'll set 1 for the maximum files to upload and one megabyte for the size of the file and over here we can select the type of the files that we'd like to see in our media library so i'll go for the gpac gif and png and i'll leave the field visibility for all okay apply the changes next one let's add the group break first good and go for another hatting field set the label basic information and leave it visible for all now i'll add the text field for the name of the user so field type text name first name label your name no description field required no input mask placeholder name no default value and i'll not limit the length and leave it visible for all okay let's make this one half of the size and add another field make it in line with the previous one and choose the field type text again name last name label username no description mark it required no input mask placeholder surname and leave it visible for all okay the next field will go for the about me info so i'll choose the type text area name about me label tell about yourself let's untick the required option and leave it visible for all okay now let's add another group break field good and now let's add a new hatting field and set the label contacts and apply the changes good and i'll add another two fields one for the email and another one for the phone i'll make it half of the size as well and in line them with each other so let's add it the email type text field type email name email label your email field required and placeholder email as well good and now let's added the phone so type text field type telephone name phone label phone field required placeholder phone and let's apply the changes good so we already have a couple of fields created and what are we gonna do now yep guys we're gonna add another group break field okay now let's add new heading for these settings so the type heading label settings visible for all and now i'm adding two more fields for the passwords so i'm changing the size right now good the first one will go for the new password so the type text field type password name new password label new password field required and placeholder password now let's edit the other one type text field type password name confirm password label confirm password field required and placeholder password again great and finally we can add the submit button and i'll change the label here to update info great now let's scroll a bit down and enable preset form field values and choose the source user get user id from current user and map the fields so we can update the info from these fields later on ok so post id will be user id profile photo let's choose user meta and enter photo first name will go for the first name last name for last name about me choose user meta and enter about me meta field name email will go for email phone again user meta phone new password will go for password and confirm password for confirm password now we're done with building the form but we still have to set up the post submit actions slash notification settings right so let's change this one to update user and map the form fields so it would save the info from the form properly so in the post id we'll set user id will update this user profile photo we'll choose user meta and set the corresponding meta field name which is photo first name will go for the first name last name for the last name about me one more time choose user meta and enter the meta field name about me email will go for email phone user meta phone new password we'll go for password confirm password for confirm password okay now we can apply the changes and save the form let's go back to elementor select form widget and choose added user form from the list great let's set the form submit type to ajax and go to the style settings to make it look a bit nicer so let's start with the rows set columns gap to 20 typography i'll choose the position preset and change the line height to 1.75 text color will be dark gray gap 4 pixels at the bottom okay let's move on to the fields tab typography again position preset change the size to 12 pixels and line height to 1.5 color gray placeholder gray background white padding let's make it 10 20 10 20 border type solid and width 1 pixel color [Music] pale grey we don't have checkbox calculated and range fields in the form so let's move on to the heading tab typography i'll choose name listings preset and change the size to 20 pixels color will be dark gray gap 5 pixels at the bottom okay we also don't have the repeater field in the form so let's go straight to the groups break tab set the height to 1 pixel and change the color to pale gray as well get before 40 and gap after 30. good required mark will stay with default styling and submit button background color will be green on normal and yellow on hover text color over here will be blue and here on normal will be white typography i'll choose position preset and change the line height to 1.75 padding let's make it 18 40 18 and 40. and margin 40 at the top okay so we don't have the next or previous buttons in the form so let's open the last tab and adjust the notification messages styling typography position line height 175 border type solid width 0 text color on success green and on error red padding zero and guys we are done let's save the changes and go back to the profile builder settings to apply this template to our settings sub page ok added user great now we can save the changes and proceed to the front end first of all to see how this page looks like and to change some info of the user from the front hand so let's change the photo good name let's make it nicole for example surname rodriguez about me i guess i'll leave it just as it is and change the phone number for example too okay let's enter the password confirm it and update the info great the info has been successfully updated thank you so much for watching this video i hope it was useful and informative for you and your projects if you still have any questions please don't hesitate to write them right in the comments below this video or contact our support team so they could assist you share your wonderful ideas with us on our github page and join our friendly facebook community cheers guys

Channel: Crocoblock

Views: 18,301

Rating: 4.9162302 out of 5

Keywords: elementor user profile, elementor user profile page, elementor profile page, elementor user profile template wordpress user profile plugin, wordpress user profile, wordpress user profile page, wordpress frontend user profile, wordpress user profile custom page, jetengine plugin, jet engine relationships, jetengine for elementor, jet engine elementor, jet engine wordpress, jetengine listing, jet engine listings, metafields, meta fields in wordpress, сrocoblock, crocoblock tutorial

Id: I_HOFovnH4k

Length: 59min 32sec (3572 seconds)

Published: Thu Mar 25 2021