Open Source Django Music Player Application Contribution | Free Software | Rohan Yeole
Summary
TLDRThe video introduces an open-source project aimed at creating and managing a Django-based environment for a music application. Initial steps include setting up a virtual environment and installing Django. The project then progresses to model creation, designing for artists, albums, and songs, enabling users to maintain different features separately by sections. The video also elaborates on creating views, templates with Bootstrap integration, and setting up URLs to handle project navigation. Key tasks for contributors include implementing song upload forms, search functionality, token-based playlist saving, and counting song plays. Moreover, the project touches upon implementing static and media file management using Django, handlining with Pillow for images, and serving them using templates. Volunteers are encouraged to contribute to solve the listed issues and thus enhance their resumes and skill sets.
Takeaways
- π Setup a virtual environment in Python for Django.
- π΅ Create models for artists, albums, and songs in Django.
- π Use pip to install necessary packages like Django and Pillow.
- ποΈ Handle static and media files using media and static URLs.
- π Integrate Bootstrap to design the web page layout.
- π Implement search functionality across artists, albums, and songs.
- π§ Manage music uploads through forms using a Django admin.
- π Track song plays and views anonymously using models.
- π§ Encourage contributions for further project development.
- π Documentation provides a basis for understanding Django deployment.
Timeline
- 00:00:00 - 00:05:00
The video introduces the first open-source project on the channel, detailing its basic requirements and how viewers can contribute, particularly in selecting the problem statement. It begins by setting up a Python virtual environment and installing Django to start the project.
- 00:05:00 - 00:10:00
The speaker demonstrates the creation of a Django project named 'music' and an app within it. They outline how to register the app in the project settings, build models for artists, albums, and songs with respective fields, and explain their relationships.
- 00:10:00 - 00:15:00
The video continues by walking through the steps to create and apply migrations using Django's migration commands, fixing issues like installing missing packages. The speaker sets up an admin interface to manage the project models and creates a superuser account.
- 00:15:00 - 00:20:00
After setting up models, the video shows data import by adding files such as music tracks and artist details to the database. It explains configuring settings for static and media files and demonstrates displaying this data on a web page.
- 00:20:00 - 00:25:00
Next, URLs are registered for the app, and an HTML template is prepared using Bootstrap. The speaker shows creating a simple homepage template and updating it to include a Bootstrap navbar and card elements to display song details.
- 00:25:00 - 00:30:00
An audio playing feature is added using JavaScript, allowing play and pause functionality for songs. The speaker demonstrates handling events for playing and pausing songs and adjusting the icon states using Bootstrap and custom JS code.
- 00:30:00 - 00:39:24
Finally, the speaker describes the key problems to solve in the open-source project, such as form creation for file upload, implementing search functionality, counting song plays, and more. They invite contributions from viewers and provide project hosting details.
Mind Map
Video Q&A
What is the video about?
The video introduces an open-source project, explaining its basic requirements and how to set up a Django environment.
How is the environment set up for this project?
A virtual environment is created using 'python hyponium VNV', and Django is installed within it.
What are the main components created in this project?
The project involves creating models for artists, albums, and songs in a Django application.
How can someone contribute to this project?
Viewers can contribute by working on issues like creating a form for song uploads or implementing a search function.
What is used to track when a song is created or updated?
Fields like 'created' and 'last updated' are used in the models to track creation and modification.
What languages or technologies are prominent in this video?
This video focuses on Python, Django, HTML, CSS, and JavaScript.
What is the purpose of the media URL and static URL in the project?
They are used to serve static and media files in the Django application.
What is used to support file and image uploads?
A package like 'pillow' is used for image handling in the application.
How are files displayed in the application?
Files are displayed using templates and static links within the Django structure.
Are there any tasks left for contributors to work on?
Yes, contributors can work on tasks like search functionality, token-based playlist saving, and capturing song play counts.
View more video summaries
Top Software Development Interview Questions and Answers For 2022 | Simplilearn
Trying to Become Good at Programming except I am suffering
FASCISM: An In-Depth Explanation
Spongebob Squarepants: Skin Theory
Onramp Webinar Series E001: Bitcoinβs Full Potential Valuation
Industry Analysis: Porter's Five Forces Model | Strategic Management | From A Business Professor
- 00:00:00foreign
- 00:00:00[Music]
- 00:00:06I welcome you to the first open source
- 00:00:08project on this channel this video is
- 00:00:10going to feature the basic requirement
- 00:00:12for this open source project and how you
- 00:00:13can contribute to the selecting the
- 00:00:16problem statement which are I am going
- 00:00:17to explain and the latter of the video
- 00:00:19so stay tuned And subscribe to this
- 00:00:21channel now let's create our faster
- 00:00:23environment here with the command called
- 00:00:25python hyponium VNV the name of the
- 00:00:28virtual environment it could be anything
- 00:00:30from your site
- 00:00:32so I'm giving here a music EnV after
- 00:00:36that one we will be just activating that
- 00:00:38virtual environment by the command that
- 00:00:40is navigating to the activate file is it
- 00:00:43in script folder and pressing enter that
- 00:00:46will activate our virtual environment
- 00:00:47once activated we will try to install or
- 00:00:50install our Django inside that
- 00:00:52particular virtual environment
- 00:00:54so once that has been done we will just
- 00:00:57going to see which are the packages that
- 00:00:59has been installed by the Django with
- 00:01:01that one so using command called pip
- 00:01:03please so you can see other related
- 00:01:05package has been installed after that
- 00:01:07one let's go ahead and create our
- 00:01:09project that is with the command called
- 00:01:11chanco admin start project and the name
- 00:01:14of the project you want to go
- 00:01:15so here I'm giving you the music project
- 00:01:19after that one just navigate inside the
- 00:01:21project that is a music project and then
- 00:01:23let's create our app so app is helpful
- 00:01:26for us to maintaining the different
- 00:01:28features in different sections basically
- 00:01:30so once that has been done by the python
- 00:01:33manager.pui start app and the name of
- 00:01:36the app that is music we will have to go
- 00:01:38to the setting.pyr and register that app
- 00:01:41inside the project so that project could
- 00:01:43know that this app has been created and
- 00:01:45installed in our project
- 00:01:47so once that has been done we will try
- 00:01:49to run our server it should run fine
- 00:01:51because we haven't changed or added
- 00:01:53anything kind of URLs right now so I am
- 00:01:56running that project on Port 80.
- 00:02:00so I open my Chrome browser
- 00:02:03and type on 127 that IP address local IP
- 00:02:06address and you can see the project is
- 00:02:08running fine
- 00:02:10now let's create our model first model
- 00:02:12we will be needing is a artist because
- 00:02:15art is going to be have a name and with
- 00:02:18that artist there will be albums and the
- 00:02:20songs so feed will be a artist's name
- 00:02:23with the maximum length of 50. then
- 00:02:26there will be a created and last updated
- 00:02:27feed for the same which will be taking
- 00:02:29track of created time and the last
- 00:02:32updated time or updation activity on
- 00:02:34that one so for the model we will also
- 00:02:38have to create a meta field which will
- 00:02:39be represented the name verbose name and
- 00:02:42the
- 00:02:43plural name for the our class that is
- 00:02:47artist
- 00:02:48now also we will be having a string
- 00:02:50representation of it inside the admin to
- 00:02:53see the
- 00:02:54name of the artist so to do so we will
- 00:02:58be adding a string string definition
- 00:02:59with that one we will be also adding a
- 00:03:02translation underscore
- 00:03:04that once that has been done we will be
- 00:03:06adding our next our class that is the
- 00:03:08album well album will be associated with
- 00:03:10the artist so it is has a foreign key to
- 00:03:13artist then album name name of the album
- 00:03:15again the created and last updated
- 00:03:18Fields here as well
- 00:03:20so this will be associated with the
- 00:03:22album Again The Meta and the sting
- 00:03:24representation of the any field from the
- 00:03:26model that is album name I am taking
- 00:03:28here
- 00:03:33this hierarchy will be uh helpful for us
- 00:03:36to know the relationship that is albums
- 00:03:39are going to be associated with the
- 00:03:41artist it is going to be only one which
- 00:03:43has the multiple albums now so we could
- 00:03:47create this album inside the admin site
- 00:03:48for us
- 00:03:56has been created let's create a next
- 00:03:58model that is the song Because song
- 00:04:00going to be associated with the album so
- 00:04:02I'm keeping as a foreign key with the
- 00:04:04album
- 00:04:11thumbnail because album thumbnail uh is
- 00:04:15not going to help us here in a
- 00:04:17nomenclature we should have a song thumb
- 00:04:19thumbnail
- 00:04:21which is going to be uploaded to the
- 00:04:23thumbnail folder
- 00:04:24now let's add a file field for our song
- 00:04:27that is MP3 uh only MP3 we are going to
- 00:04:30take for now
- 00:04:32which is going to be uploaded to do
- 00:04:33songs folder also with this one we are
- 00:04:36going to add a song name that is we are
- 00:04:38taking from the name of the song updated
- 00:04:41and the last stated that is the default
- 00:04:43one also the meta and the string
- 00:04:45representation of the field and if it
- 00:04:47from here
- 00:04:49remember string representation only
- 00:04:51being going to be have a string not an
- 00:04:53integer or any type of other field
- 00:04:56so lastly let's recap the relationship
- 00:04:59here that artist going to have multiple
- 00:05:02albums albums going to have multiple
- 00:05:04songs now once we have created this uh
- 00:05:07hierarchy now it's time for us to create
- 00:05:10migrations
- 00:05:12so to do some migration we will be
- 00:05:13running python manager.pr make a
- 00:05:15migration command but I am getting a
- 00:05:17error here that is I haven't installed
- 00:05:19the pillow because pillow is necessary
- 00:05:21for the handling the images so let's
- 00:05:23install that one here as well that is
- 00:05:25below with the command called pip
- 00:05:26install pillow this will install the
- 00:05:29pillows latest version to the this
- 00:05:31virtual environment that is we have
- 00:05:33right here that is a music EnV once that
- 00:05:37has been installed I am getting a
- 00:05:38warning that my peep uh
- 00:05:40version is is not update updated so
- 00:05:44let's I've been going to update that one
- 00:05:46with the command specified
- 00:05:49once that has been done let's create our
- 00:05:51uh migrations that with the same command
- 00:05:53and you can see I have created these
- 00:05:55three models album songs and artists to
- 00:05:59our migrations file
- 00:06:02once uh migration is ready let's migrate
- 00:06:05this whole tables to our database so it
- 00:06:08could get applied so I am just checking
- 00:06:10here that if the our initial is zero
- 00:06:13zero zero zero zero one music initial
- 00:06:15has been applied or not you can see in
- 00:06:17the bottom second bottom name that is
- 00:06:20there yeah so we have our migration has
- 00:06:23been so we don't have to run a specific
- 00:06:25migration for our app
- 00:06:27so after the migrations we base how to
- 00:06:30add our whole tables to the admin side
- 00:06:32so here I am adding those things with
- 00:06:35inside the admin.py this uh will be
- 00:06:37including the fields that is an uh
- 00:06:40artist name and the created last last
- 00:06:42updated whatever the feeder fields are
- 00:06:44there for all the models you need to add
- 00:06:47that one as a stream parameter we are
- 00:06:49only taking consideration of the list
- 00:06:51display there are many options here but
- 00:06:53we are not taking that one right now
- 00:06:58so once you have added that uh admin
- 00:07:00then you can or we will have to create
- 00:07:04one more user for this one because we
- 00:07:06haven't created user at uh till now that
- 00:07:08user going to be super user for this
- 00:07:10whole admin so let's open our terminal
- 00:07:12let's type on the command called
- 00:07:14pythonmanage.py create a super user
- 00:07:17let's just hit enter
- 00:07:20it's asking us a username so I'm giving
- 00:07:22as a music as a username just type on
- 00:07:24the email email we are not specifying
- 00:07:26here then password
- 00:07:28I am keeping as a short password
- 00:07:31look like I haven't to match that one
- 00:07:32correctly
- 00:07:34this match and yeah we are good to go
- 00:07:37now so I'm just going to open my Open my
- 00:07:41Chrome browser and run this project
- 00:07:43there
- 00:07:44before running make sure that you have
- 00:07:46run may run the command called run
- 00:07:48server
- 00:07:49just log in here with your connect
- 00:07:51relation that you have just created
- 00:07:53with the music and the password oops
- 00:07:57now again the password
- 00:08:00yeah so we have that admin area for us
- 00:08:02here where we have all the tables that
- 00:08:06is for music app we have albums artists
- 00:08:08and songs you can see the data is not
- 00:08:11there right now we will have to add the
- 00:08:12data and the default one authentication
- 00:08:15are the users and the groups we will
- 00:08:17talk about more on the groups and users
- 00:08:18in the later videos whenever we get a
- 00:08:21chance
- 00:08:21[Music]
- 00:08:24now as we have created our models as
- 00:08:27well now let's import our data that is
- 00:08:30files and whatever it is now I'm using a
- 00:08:33purple cat.com uh this is a website
- 00:08:35where from I have downloaded some of the
- 00:08:37tracks it will be laughing tracks
- 00:08:39basically
- 00:08:40and uh let's try to add that one inside
- 00:08:43the database so here I am inside the uh
- 00:08:46first of all we will have to add artist
- 00:08:48because that is a first thing we will
- 00:08:50have to do so artist name I mean I'm
- 00:08:53giving as a purple cat because that is
- 00:08:55the author uh name as well
- 00:08:58so once that has been added here let's
- 00:09:01go to the albums and then let's create a
- 00:09:03album for the artist
- 00:09:05so to create the album just add one
- 00:09:08click on ADD album and just type on the
- 00:09:10name of the album anything I'm here here
- 00:09:12gaming let's say laughing music and
- 00:09:15associating with the purple cat
- 00:09:18click on save this will add one entry to
- 00:09:20our database giving the name of the
- 00:09:23purple line my purple cat sorry and the
- 00:09:25album name so once that has been added
- 00:09:28let's go to our setting.py and add two
- 00:09:32things that is a static URL and static
- 00:09:34route with that one's media URL and the
- 00:09:36media root so these are helpful for us
- 00:09:38to add the files to our project and the
- 00:09:43gaping a particular URL as well
- 00:09:46so what that one added uh go to the
- 00:09:49urls.py main url.py and I add this two
- 00:09:52things that is static with the media URL
- 00:09:55and the media root with the static URL
- 00:09:58and static root this is necessary to
- 00:10:00build a URL for particular file and the
- 00:10:03resource that we are saving to our
- 00:10:04database
- 00:10:05so I'm just uh
- 00:10:08restarting our server and go to the now
- 00:10:11Chrome just refresh once and now just
- 00:10:14click on the
- 00:10:16add sum
- 00:10:18so adding a song is easy just to select
- 00:10:20the album then the file then the
- 00:10:24MP3 file that we wanted to put so
- 00:10:27basically there are two things uh
- 00:10:29thumbnail and the file so I have
- 00:10:31downloaded some of the files from the
- 00:10:33internet that is images random images
- 00:10:36and I'm just associating with the with
- 00:10:38our files here you can see our thumbnail
- 00:10:42has been loaded correctly so meaning
- 00:10:44that our static root and static URL are
- 00:10:46working fine with the mirror as as well
- 00:10:49so these are going to the our media
- 00:10:51folder that is a song songs folder and
- 00:10:54with the thumbnail going to the
- 00:10:55thumbnail folder
- 00:10:57so I'm just going to speed up this
- 00:10:59process because I'm just going to add on
- 00:11:01some multiple files here
- 00:11:19now once uh this that process is
- 00:11:21completed you can see we have all the
- 00:11:22files here the indexing is starting from
- 00:11:242 because uh one of the entry I have
- 00:11:27deleted previously that was not working
- 00:11:29so you can see it start indexing is
- 00:11:31starting from that two to an onwards so
- 00:11:34uh if I go to the our home page that is
- 00:11:37uh on the root IP address you can see
- 00:11:39there is no URL or page not phone you
- 00:11:41know right now because we haven't added
- 00:11:43any page or something to our
- 00:11:47our project it
- 00:11:49so next thing is we will be doing is
- 00:11:51like we will be adding a page where we
- 00:11:54will be able to see the all the music
- 00:11:57and the thumbnail with the artist name
- 00:11:59and the Sorting them out on the front
- 00:12:01page
- 00:12:04now let's try to add our URLs basically
- 00:12:06we are going to register our URLs from
- 00:12:09the app that is music app
- 00:12:11so I'm going to copy the whole structure
- 00:12:14forms our root URL that is hold this
- 00:12:18admin and blog and all these things
- 00:12:19but before that one we will have to
- 00:12:21register our main music app so I'm just
- 00:12:23adding that one here like that path and
- 00:12:25the include
- 00:12:27and then music dot urls
- 00:12:30so next thing I will I will have to do
- 00:12:33is like I will have to create one file
- 00:12:35inside our music app that is urls.py for
- 00:12:38the URLs for the music apps
- 00:12:47no once that has been created I will go
- 00:12:49to the my main viewerl.py copy all the
- 00:12:52things paste it there remove unnecessary
- 00:12:54things from here and admin also with the
- 00:12:58include 2 because we don't need that one
- 00:13:01and unnecessary Imports as well
- 00:13:11now we in the path we will have to
- 00:13:14specify views which we this path going
- 00:13:16to handle then name of the view name of
- 00:13:19the view will be going to hand help us
- 00:13:21to identify this path in whole project
- 00:13:25so let's go to the view Dot py views.py
- 00:13:28and create a one uh view there which
- 00:13:31will going to handle the main template
- 00:13:33or a main page of the this project where
- 00:13:35we will going to list out all the musics
- 00:13:39played
- 00:13:46and played
- 00:13:51now what's the basic view is ready let's
- 00:13:53create a templates folder where we will
- 00:13:55be putting our whole uh HTML kind of a
- 00:13:59templates so the main template name is
- 00:14:01index.html
- 00:14:06now the once the template is ready let's
- 00:14:09go and add our bootstrap so I'm using
- 00:14:11bootstrap 5 version 5 here uh go to the
- 00:14:14bottom and there is a starter template
- 00:14:16copy the template and move to the
- 00:14:17index.html file so I'm just renaming the
- 00:14:20title here so from Hell over to open
- 00:14:25source
- 00:14:27music project or a player
- 00:14:37I am also removing the unnecessary
- 00:14:39JavaScript JavaScript from here bottom
- 00:14:42to make it clean
- 00:14:46now what's the uh we have added that
- 00:14:48basic template let's go to the urls.py
- 00:14:51and it's music app url.py add a view and
- 00:14:54name of The View
- 00:14:56like this one
- 00:14:57and it should be okay now
- 00:15:01for rendering on the main page
- 00:15:06so if I if I refresh you can see the
- 00:15:08open source music player has been
- 00:15:10rendered correctly meaning that it's
- 00:15:12working fine
- 00:15:13so now I am going to add a now bar to
- 00:15:15our project
- 00:15:16so I will type in the search DOC number
- 00:15:19then
- 00:15:23copy this template basic template from
- 00:15:25here
- 00:15:27go to the index.html file add it there
- 00:15:29as well
- 00:15:31and then I will going to remove
- 00:15:32unnecessary code from it
- 00:15:41remember on the main page of the numbers
- 00:15:43that documentation there are many
- 00:15:45examples you can see
- 00:15:48but we are taking this ah only the basic
- 00:15:52example where the search bar is on the
- 00:15:53right hand side and the name of the
- 00:15:55project is on the right left hand side
- 00:16:02refresh it you can see the number has
- 00:16:04been rendered correctly so I've just
- 00:16:06remove the H1 tag from Top
- 00:16:08and refresh again you can see our
- 00:16:11project has been I'm sorry our template
- 00:16:13has been rendered successfully or
- 00:16:15correctly you can say
- 00:16:17so just rename the things like name of
- 00:16:20the project like Navar then provide the
- 00:16:23basic URL there which will be very much
- 00:16:26the user going to click on the text it
- 00:16:28will enter to the home page so like that
- 00:16:30one too
- 00:16:37now the to the search input uh sorry
- 00:16:40search form give the method as a post
- 00:16:42and also
- 00:16:45because this is this going to be going
- 00:16:47to be search for us something on the
- 00:16:49platform here I can you can see I forgot
- 00:16:51about the csrf token so I'm just going
- 00:16:53to add that one here and refresh again
- 00:16:56and try to post blank post it should
- 00:16:59work fine like it is working fine and
- 00:17:01you can say that there is a 200 uh post
- 00:17:03request also for the EU
- 00:17:05on the slashy water
- 00:17:09now I go to the bootstrap template then
- 00:17:12I search for the cards so cards will be
- 00:17:14helpful for us to align on the left hand
- 00:17:16side image the right hand side will be
- 00:17:18text and then far away right will be the
- 00:17:20button to play the particular song
- 00:17:23so I'm just checking here a template
- 00:17:24which can be useful for that particular
- 00:17:26structure
- 00:17:28So Below you can see we have the
- 00:17:32template here
- 00:17:34which has on the left hand side has a
- 00:17:36image right hand side has some text and
- 00:17:39the far right we can also add one more
- 00:17:41column where we can put our say but
- 00:17:46playing button or pause button basically
- 00:17:49so just copy that template go to the
- 00:17:51main home page just pet space today
- 00:17:56before pasting just let's create one
- 00:17:58container so it could be remain in the
- 00:18:00you know in the middle of the page
- 00:18:06and paste it there once been pasted just
- 00:18:09remove the style we don't need that
- 00:18:11style we want to do to be horizontally
- 00:18:13full width so just refresh again to see
- 00:18:16the output yeah we have the output
- 00:18:18correctly
- 00:18:19now we will just going to update this
- 00:18:21kind of a text from this card with the
- 00:18:24actual Dynamic content to do so I will
- 00:18:27go to the user py and take out I will
- 00:18:30write out the first query for the whole
- 00:18:32table that is taking the old data that
- 00:18:35is all the music from the our model that
- 00:18:37is a song model so I'm just going to
- 00:18:40import that inside here uh in into the
- 00:18:42view.speaker
- 00:18:44like from dot models dot I am using
- 00:18:46because this is just a existing folder
- 00:18:49and I just need to go to the a previous
- 00:18:52file structure so I just used dot for
- 00:18:55there and import the song from it and
- 00:18:59then I just query it as a get to get the
- 00:19:01all objects or all the data that is
- 00:19:03objectives on it'll be flipple
- 00:19:06I then pass it to the one variable that
- 00:19:08is all songs now I am going to the uh
- 00:19:11take out one song from all songs with
- 00:19:13the for Loop you can see the for Loop
- 00:19:15has been created by this way so it calls
- 00:19:18ginger templating in the ginger we write
- 00:19:21the for Loop like this one
- 00:19:28just align the content correctly to the
- 00:19:30page
- 00:19:32and then a source will be the name URL
- 00:19:35of this thumbnail that is there so song
- 00:19:38Dot Song thumbnail dot URL will be the
- 00:19:41ah
- 00:19:44providing us a path from the media
- 00:19:47folder remember the thumbnail algorithm
- 00:19:49going to be saved in the media and then
- 00:19:51thumbnail folder so it will come from
- 00:19:53that particular way also a text could be
- 00:19:56like a song name it could be easy to
- 00:19:58give
- 00:19:59and same goes for the song
- 00:20:03so first of all let's add the song name
- 00:20:07it's uh to the card title let's replace
- 00:20:10that one too
- 00:20:13so once the card title has been replaced
- 00:20:15let's go to add a
- 00:20:21album name so album name will be to the
- 00:20:24card text that is
- 00:20:26we will be taking as a song
- 00:20:28Dot and then name uh album
- 00:20:35and it will be from
- 00:20:38so meaning that this song is taken from
- 00:20:40this album
- 00:20:49now I'm going to copy the last updated
- 00:20:52and we're going to put into the below
- 00:20:56cortex that is last updated on on
- 00:20:59particular time so the time will be
- 00:21:00coming from last updated and the
- 00:21:03template filter we are using is a time
- 00:21:05since meaning that this has been uh
- 00:21:08taking from particular time sense
- 00:21:11so you can see the text has been
- 00:21:13rendered so last updated time and
- 00:21:16minutes ago
- 00:21:18the text or sorry the media also been
- 00:21:20rendered correctly and the name all the
- 00:21:22things are rendered correctly you can
- 00:21:24see here
- 00:21:26now next part is to create one more uh
- 00:21:29du which will be going to handle our
- 00:21:31uh what we can say
- 00:21:34music music or play and pause things
- 00:21:38so what are we going to do is I will
- 00:21:40just go
- 00:21:43first of all I'm just re-structuring the
- 00:21:45data that is adding a margin or margin
- 00:21:47or something
- 00:21:48on the top merging will be three uh
- 00:21:52REM
- 00:21:54remember that REM 1 REM equals to
- 00:21:5816px so it will be 16 into 3 is equals
- 00:22:02to
- 00:22:024 t x p x from the top
- 00:22:07um again restructuring it with the
- 00:22:08columns so this is useful for you know
- 00:22:11the you know the image size has been too
- 00:22:15much so I'm just restructuring that one
- 00:22:17to two column and adding eight columns
- 00:22:19at the cities for the text
- 00:22:23[Music]
- 00:22:24once the touch has been
- 00:22:26um updated let's create a one more
- 00:22:28column and uh that column will be two
- 00:22:31columns
- 00:22:31with the play button
- 00:22:34so this play button basically going to
- 00:22:36handle our
- 00:22:38play and pause things so let's try
- 00:22:51let's now add icon for that one that is
- 00:22:53play button icon so I go to the icons of
- 00:22:56bootstrap then I can
- 00:23:00and I can type on play you can see there
- 00:23:02are many icons these are the three icons
- 00:23:04so you can use it in one project so I'm
- 00:23:06just clicking on that play circle one
- 00:23:10and copy the SVG orbit
- 00:23:13come to the project just paste it so it
- 00:23:16will
- 00:23:17render the size of it and also I'm
- 00:23:19adjusting the size SVG has this feature
- 00:23:22that it's a major feature that we could
- 00:23:24adjust the height accordingly heightened
- 00:23:26with accordingly the needle we have
- 00:23:29you can see the image or a SVG button
- 00:23:32has been rendered correctly
- 00:23:34so I will try here some basic thing like
- 00:23:36making it align to the center
- 00:23:39and the middle
- 00:23:41so it can remain floating around in a
- 00:23:44particular height
- 00:23:45to do so uh I will just try to add the
- 00:23:48display Flex here
- 00:23:50it's a property
- 00:23:52CSS property basically
- 00:23:59and with that one I will also add align
- 00:24:02items this will align the items to the
- 00:24:05center
- 00:24:15okay you can see there is a width issue
- 00:24:18or height issue
- 00:24:20so I just added the height a hundred
- 00:24:22percent here I will just try to add a
- 00:24:23width as well but I guess we will not uh
- 00:24:26healthy help us here to make it
- 00:24:28stretchable
- 00:24:29another property we could use a uh
- 00:24:32justify content
- 00:24:35that should help us to stretch it out
- 00:24:37the content to the very end
- 00:24:42so for justify content I'm using a
- 00:24:44property called Center
- 00:24:46so this will align the content to the
- 00:24:48center of the tube so play button is the
- 00:24:51menu so just a buy content will
- 00:24:53accordingly add
- 00:24:54to the center of it that play button
- 00:24:57will be around
- 00:24:58so once that has been added I'm just
- 00:25:00adding those bootstrap classes here for
- 00:25:03play button
- 00:25:04like display plugs then justify content
- 00:25:07Center then align items also Center
- 00:25:11and we are 100 H dash hundred will be
- 00:25:15800 so these are the basically the
- 00:25:17predefined classes inside the booster
- 00:25:19that will be helpful for us to maintain
- 00:25:21the you will say simplify the creating
- 00:25:24the classes and the CSS it's it's
- 00:25:26important to understand this is just
- 00:25:28simply find the CSS for us by
- 00:25:31predefining us some particular way
- 00:25:33you can see our whole structure has been
- 00:25:36aligned Center
- 00:25:37the next thing we will have to do is
- 00:25:39like
- 00:25:40to add some gold to play and pause the
- 00:25:43particular track
- 00:25:44also with that one play if the user is
- 00:25:48clicking on the play button then if
- 00:25:50there is any existing uh
- 00:25:52song is playing that should be got
- 00:25:53paused and the current Source song which
- 00:25:56on which the user has clicked should be
- 00:25:58get played
- 00:26:01right so in meantime I am just uh
- 00:26:04readjusting the height and width here
- 00:26:06for our play button I'm just playing
- 00:26:07around with the heightened with no beat
- 00:26:11now to add a Javas or sorry to add a
- 00:26:16file audio file we will have to create
- 00:26:18one more view that I will call it as a
- 00:26:21audio file div where I will just copy
- 00:26:24and paste the some basic HTML for the
- 00:26:26audio so I have created this uh for div
- 00:26:29I go to the search bar and then type on
- 00:26:32HTML audio
- 00:26:35tag
- 00:26:37so you can see the HTML basic tag is
- 00:26:40here I've just copy this all the things
- 00:26:42from here
- 00:26:44with the controls as well because we
- 00:26:46might need a controls
- 00:26:48and I will just remove that OGG file
- 00:26:51type
- 00:26:52because we don't need it because anyway
- 00:26:54the MP3 file going to be MPEG so it
- 00:26:57doesn't need us we don't need that one
- 00:26:59right now
- 00:27:00and the source I am going to say song
- 00:27:02dot song that is there
- 00:27:05I will just try to render it
- 00:27:10so you can see in the background the
- 00:27:12files has been little but I guess it's
- 00:27:14not working because of file path is not
- 00:27:16correctly specified for the same
- 00:27:19just try to debug that one so I just
- 00:27:22inspect
- 00:27:23go to the console you can see the
- 00:27:26server responded status with the 404
- 00:27:28meaning that is path or something is
- 00:27:30missing for that one to again re-verify
- 00:27:33that one what we can do is like
- 00:27:36we could inspect it
- 00:27:42one more thing we could do is like
- 00:27:43before inspecting it we could go to the
- 00:27:45admin check out that the data is
- 00:27:47available or not also that may not be
- 00:27:49the case so I just go to the music admin
- 00:27:52admin site and I will just click on the
- 00:27:55percent that we have created so just
- 00:27:57create a click on that particular entry
- 00:27:59and you can see the stack is okay but
- 00:28:02you can see the path of it that is
- 00:28:03coming from media then songs and then
- 00:28:05the name of the particular file name
- 00:28:07right so if I go again to our main site
- 00:28:11so I will just duplicate this page
- 00:28:13and remove the path of it
- 00:28:17right hit enter
- 00:28:21now I again go to inspect this
- 00:28:24particular page
- 00:28:32now if I go to the console again
- 00:28:36server is
- 00:28:37showing as a 404 you can see it's inside
- 00:28:41the media folder the source is correct
- 00:28:44but I guess we forgot about the path of
- 00:28:46it so I just click on that particular I
- 00:28:48just open that particular file that is
- 00:28:50there
- 00:28:51that is audio file and then audio and
- 00:28:53you can see the songs is not having a
- 00:28:57prefix of the media
- 00:28:59so you can see the media is there but uh
- 00:29:01in a HTML page we don't have that one
- 00:29:03sometime you may be able to find out
- 00:29:05this kind of errors on your project as
- 00:29:06well so basically what you need to do is
- 00:29:08like for the URL sorry to the file or
- 00:29:11whatever it is just put a dot URL so
- 00:29:13that will specify the mid uh
- 00:29:16path from our media folder media our
- 00:29:18study folder whatever depending upon the
- 00:29:21source or folder you can see
- 00:29:24so you can see if I play it it's getting
- 00:29:26played and also it's also getting
- 00:29:28downloaded for buffering buffering part
- 00:29:32so I'm just keeping as a display none
- 00:29:34because we don't want to say show it we
- 00:29:36just want to know on click of any play
- 00:29:38button we just want to play particular
- 00:29:41track for particular that card right
- 00:29:46so to do so I will just create a one
- 00:29:49more folder here called Static that will
- 00:29:52handle our JavaScript CSS files or a
- 00:29:55static uh I can say images also also
- 00:29:59I've been going to create them in dot JS
- 00:30:01file with that one I'm creating one
- 00:30:03folder as well JS and moving that to the
- 00:30:06main JS code uh main JS full
- 00:30:10so in a JS file I'm just pasting that
- 00:30:14some code
- 00:30:17now once the JS file is ready I'm just
- 00:30:20going to
- 00:30:24load static because we want to load the
- 00:30:27that JavaScript file from our that
- 00:30:29static folder so that needs to be loaded
- 00:30:31from by the stack or static so just
- 00:30:34create a tag script and so in Source
- 00:30:36just type on static
- 00:30:38like this one and the provide the
- 00:30:41JavaScript folder and then the file name
- 00:30:44that is main.js this will render our
- 00:30:46file to our browser
- 00:30:48closer remember to close the JavaScript
- 00:30:50tagged assets
- 00:31:02so we have we are not able to find out
- 00:31:04the JavaScript file okay so if I re
- 00:31:08restarted the server you can see I'm now
- 00:31:11getting a jQuery error
- 00:31:13so I go to jquery.com it's the simplest
- 00:31:17way to go there and go to the section
- 00:31:20where you can find out the link to the
- 00:31:22JavaScript
- 00:31:23that is https link basically go to the
- 00:31:26main.html file index.html file and then
- 00:31:30created one more script tag with that
- 00:31:32one add that source to it that will load
- 00:31:35our jQuery from that particular URL that
- 00:31:38is code.jquery.com and the main jQuery
- 00:31:42is latest version you can see it's a
- 00:31:443.6.3
- 00:31:46so if I refresh the page again the error
- 00:31:50should go because that is how it is
- 00:31:53now to understand the next thing for
- 00:31:55this project we will have to consider
- 00:31:57this use cases use a click on play
- 00:31:58button it could go to the either go to
- 00:32:01the pause
- 00:32:02the next thing will be the pause uh
- 00:32:04State for the particular sum so if if
- 00:32:07there is any current sound then play it
- 00:32:13or if there is any existing song or
- 00:32:16running on the browser just pause it
- 00:32:19and both if the those after completing
- 00:32:22this both options just play the current
- 00:32:24clicked song
- 00:32:29so to do so I have added this I'm going
- 00:32:31to add this code to our Javascript file
- 00:32:33basically so I'm just clicking on the
- 00:32:35play button SVG
- 00:32:37one certificate click I am just
- 00:32:38preventing that this should not refresh
- 00:32:40the page
- 00:32:41after that one I am just clicking taking
- 00:32:43the pause button if there is any pause
- 00:32:45button uh class on our page so I'm
- 00:32:48selecting that one I'm just iterating
- 00:32:50through the pause button and uh I'm just
- 00:32:53getting through it inside the one
- 00:32:55element that is uh it's a constant
- 00:32:59with the getting or eliminate so to the
- 00:33:02element I am checking if there is a uh
- 00:33:04I'm removing the pause button class from
- 00:33:06it then adding a play button class to it
- 00:33:09then I will I'm just trying to find out
- 00:33:12the what is the audio file for this
- 00:33:14particular card on which the pause
- 00:33:16button or play button has been clicked
- 00:33:18with the element.wire apparent element
- 00:33:20dot query selector with the audio file
- 00:33:22audio and pause it basically
- 00:33:25and then update the SVG to the play
- 00:33:28button
- 00:33:31now once this has been done I'm just uh
- 00:33:34finding out the current audio file for
- 00:33:36whenever the user click on the
- 00:33:37particular card only
- 00:33:39and uh with that one
- 00:33:44finding out the play button as well with
- 00:33:47the play button class then adding a one
- 00:33:50more class to it that is the pause
- 00:33:51button updating the SVG to the pause SVG
- 00:33:55this process which I have also taken
- 00:33:57from the bootstrap icons remember that
- 00:33:59one and then I am just playing that uh
- 00:34:02audio file with the play class
- 00:34:04or a play function sorry
- 00:34:06so another class we will have to do is
- 00:34:08like whenever click on some someone
- 00:34:10click on the pause button so if someone
- 00:34:12click on the plus pause SVG then we were
- 00:34:15preventing to re-reficiate
- 00:34:18then finding the audio file then the
- 00:34:21audio button sorry pause button
- 00:34:23basically that pause icon pause the
- 00:34:25class basically then uh taking that
- 00:34:28pause removing that pause uh button
- 00:34:31class then adding a play button class to
- 00:34:34it because we wanted to show the play
- 00:34:35button whenever there's a pause
- 00:34:37and the re-updating the whole HTML again
- 00:34:41with the walls sorry play icon so you
- 00:34:44can see here in a demo if I click on any
- 00:34:47uh button the button play and pause play
- 00:34:49and Clause has been on getting updated
- 00:34:51correctly
- 00:34:56[Music]
- 00:34:57now let's discuss about the problem that
- 00:34:59we need to uh solve from this open
- 00:35:01source project first problem will be
- 00:35:03like creating a form and uploading the
- 00:35:05songs so these songs and the uploading
- 00:35:08uploadation will be having some
- 00:35:09hierarchies it called China drop downs
- 00:35:12basically first of all user going to
- 00:35:15select the artist then the album related
- 00:35:17to the artist this should be uh chain
- 00:35:20like uh take someone selected One
- 00:35:23Republic then their albums should come
- 00:35:25album labels should come not the other
- 00:35:27persons so by selecting the album user
- 00:35:30can upload a song with the name and the
- 00:35:32thumbnail of the image so this will be
- 00:35:34one form where
- 00:35:37contributor has to work on
- 00:35:40then second issue is like
- 00:35:43let's go to the second issue that is the
- 00:35:45search functionality so the search
- 00:35:47function is basically going to uh scroll
- 00:35:50crawl through artist name album name and
- 00:35:52the song name so anything matches with
- 00:35:55anything from these three should return
- 00:35:57a result to the browser so it's just
- 00:35:59it's the most simplest one to solve then
- 00:36:02just go to the third one third one is
- 00:36:04like capture the number of times the
- 00:36:05song has been played it it kind of like
- 00:36:07uh finding the views on a LinkedIn page
- 00:36:10like how many people have views viewed
- 00:36:11that particular post or a viewed a video
- 00:36:14on the YouTube so this kind of a thing
- 00:36:16this will be uh Anonymous so we will not
- 00:36:19be able to track down or know who has
- 00:36:22viewed the particular song or who has
- 00:36:23played the song So this should be
- 00:36:25anonymous it should be just a counter
- 00:36:27and it should contain a model to store
- 00:36:29this values and uh the flow of it
- 00:36:34then the fourth uh problem is like
- 00:36:39our token was based playlist saving so
- 00:36:42meaning that the whenever you or someone
- 00:36:44come to the platform they should not
- 00:36:46require to log into our our platform
- 00:36:48they should be a token where with by
- 00:36:51that token they could remember that they
- 00:36:54have a slight particular song from our
- 00:36:56platform meaning that we also need to
- 00:36:58implement the like functionality with
- 00:37:00the same same thing so I will again
- 00:37:02going to create a one more uh issue on
- 00:37:04this one that like functionality should
- 00:37:06be get added so token will be a 15 digit
- 00:37:09uh 15 characters or a 10 characters
- 00:37:12depending upon the user or it could be a
- 00:37:13string that user could enter so meaning
- 00:37:16that it could be a generated randomly or
- 00:37:18by user Choice as well so these two
- 00:37:20things should be considered while
- 00:37:22creating the token best place same
- 00:37:25so these are the four uh issues that I
- 00:37:28have created the fifth one is like
- 00:37:30simplest one is to create the Json file
- 00:37:34to store the properties for the
- 00:37:36production like a
- 00:37:38Force should be ah sorry debug should be
- 00:37:40false then secret key should be
- 00:37:42different on the different environments
- 00:37:44as well so this kind of a structure that
- 00:37:46needs to be solved or is kept in even
- 00:37:49EnV file so uh you can visit this link
- 00:37:52that is the dog dogs uh
- 00:37:55how to deploy uh
- 00:37:57Django project on the server it has a
- 00:38:00different uh scenarios where we should
- 00:38:02look into for example uh
- 00:38:05checking the HDI file or checking the
- 00:38:08deploy requirement as well
- 00:38:11so these are the five issue that we need
- 00:38:13to look into first of all and more will
- 00:38:16be coming when we are starting uh
- 00:38:17getting a pull request from the peoples
- 00:38:19like you
- 00:38:21so looking forward from you to get some
- 00:38:25you know work on this one
- 00:38:28with this one I'm also uh I have also
- 00:38:30deployed our application to this URL the
- 00:38:32URL is also provided inside the GitHub
- 00:38:34account
- 00:38:35and also the uh video that is going to
- 00:38:38explain this one also containing the
- 00:38:39your same URL that like this one so here
- 00:38:42you can play around with the different
- 00:38:43uh use cases as well and you can also
- 00:38:46set up this kind of environment on your
- 00:38:47local machine
- 00:38:49so do contribute and make your resume
- 00:38:51much more better to discuss with your
- 00:38:54require uh recruitment person to have a
- 00:38:57little bit more talk and they will be
- 00:38:59able to judge you based on that one
- Open Source
- Django
- Python
- Virtual Environment
- Music Management
- Model Creation
- Bootstrap
- File Handling
- Contributor Task
- Web Development