Open Source Django Music Player Application Contribution | Free Software | Rohan Yeole

00:39:24
https://www.youtube.com/watch?v=UhgFfxcWBU4

ๆฆ‚่ฆ

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.

ๅŽ็ฉซ

  • ๐Ÿ“€ 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.

ใ‚ฟใ‚คใƒ ใƒฉใ‚คใƒณ

  • 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

ใ‚ˆใใ‚ใ‚‹่ณชๅ•

  • 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.

ใƒ“ใƒ‡ใ‚ชใ‚’ใ‚‚ใฃใจ่ฆ‹ใ‚‹

AIใ‚’ๆดป็”จใ—ใŸYouTubeใฎ็„กๆ–™ๅ‹•็”ป่ฆ็ด„ใซๅณใ‚ขใ‚ฏใ‚ปใ‚น๏ผ
ๅญ—ๅน•
en
ใ‚ชใƒผใƒˆใ‚นใ‚ฏใƒญใƒผใƒซ:
  • 00:00:00
    foreign
  • 00:00:00
    [Music]
  • 00:00:06
    I welcome you to the first open source
  • 00:00:08
    project on this channel this video is
  • 00:00:10
    going to feature the basic requirement
  • 00:00:12
    for this open source project and how you
  • 00:00:13
    can contribute to the selecting the
  • 00:00:16
    problem statement which are I am going
  • 00:00:17
    to explain and the latter of the video
  • 00:00:19
    so stay tuned And subscribe to this
  • 00:00:21
    channel now let's create our faster
  • 00:00:23
    environment here with the command called
  • 00:00:25
    python hyponium VNV the name of the
  • 00:00:28
    virtual environment it could be anything
  • 00:00:30
    from your site
  • 00:00:32
    so I'm giving here a music EnV after
  • 00:00:36
    that one we will be just activating that
  • 00:00:38
    virtual environment by the command that
  • 00:00:40
    is navigating to the activate file is it
  • 00:00:43
    in script folder and pressing enter that
  • 00:00:46
    will activate our virtual environment
  • 00:00:47
    once activated we will try to install or
  • 00:00:50
    install our Django inside that
  • 00:00:52
    particular virtual environment
  • 00:00:54
    so once that has been done we will just
  • 00:00:57
    going to see which are the packages that
  • 00:00:59
    has been installed by the Django with
  • 00:01:01
    that one so using command called pip
  • 00:01:03
    please so you can see other related
  • 00:01:05
    package has been installed after that
  • 00:01:07
    one let's go ahead and create our
  • 00:01:09
    project that is with the command called
  • 00:01:11
    chanco admin start project and the name
  • 00:01:14
    of the project you want to go
  • 00:01:15
    so here I'm giving you the music project
  • 00:01:19
    after that one just navigate inside the
  • 00:01:21
    project that is a music project and then
  • 00:01:23
    let's create our app so app is helpful
  • 00:01:26
    for us to maintaining the different
  • 00:01:28
    features in different sections basically
  • 00:01:30
    so once that has been done by the python
  • 00:01:33
    manager.pui start app and the name of
  • 00:01:36
    the app that is music we will have to go
  • 00:01:38
    to the setting.pyr and register that app
  • 00:01:41
    inside the project so that project could
  • 00:01:43
    know that this app has been created and
  • 00:01:45
    installed in our project
  • 00:01:47
    so once that has been done we will try
  • 00:01:49
    to run our server it should run fine
  • 00:01:51
    because we haven't changed or added
  • 00:01:53
    anything kind of URLs right now so I am
  • 00:01:56
    running that project on Port 80.
  • 00:02:00
    so I open my Chrome browser
  • 00:02:03
    and type on 127 that IP address local IP
  • 00:02:06
    address and you can see the project is
  • 00:02:08
    running fine
  • 00:02:10
    now let's create our model first model
  • 00:02:12
    we will be needing is a artist because
  • 00:02:15
    art is going to be have a name and with
  • 00:02:18
    that artist there will be albums and the
  • 00:02:20
    songs so feed will be a artist's name
  • 00:02:23
    with the maximum length of 50. then
  • 00:02:26
    there will be a created and last updated
  • 00:02:27
    feed for the same which will be taking
  • 00:02:29
    track of created time and the last
  • 00:02:32
    updated time or updation activity on
  • 00:02:34
    that one so for the model we will also
  • 00:02:38
    have to create a meta field which will
  • 00:02:39
    be represented the name verbose name and
  • 00:02:42
    the
  • 00:02:43
    plural name for the our class that is
  • 00:02:47
    artist
  • 00:02:48
    now also we will be having a string
  • 00:02:50
    representation of it inside the admin to
  • 00:02:53
    see the
  • 00:02:54
    name of the artist so to do so we will
  • 00:02:58
    be adding a string string definition
  • 00:02:59
    with that one we will be also adding a
  • 00:03:02
    translation underscore
  • 00:03:04
    that once that has been done we will be
  • 00:03:06
    adding our next our class that is the
  • 00:03:08
    album well album will be associated with
  • 00:03:10
    the artist so it is has a foreign key to
  • 00:03:13
    artist then album name name of the album
  • 00:03:15
    again the created and last updated
  • 00:03:18
    Fields here as well
  • 00:03:20
    so this will be associated with the
  • 00:03:22
    album Again The Meta and the sting
  • 00:03:24
    representation of the any field from the
  • 00:03:26
    model that is album name I am taking
  • 00:03:28
    here
  • 00:03:33
    this hierarchy will be uh helpful for us
  • 00:03:36
    to know the relationship that is albums
  • 00:03:39
    are going to be associated with the
  • 00:03:41
    artist it is going to be only one which
  • 00:03:43
    has the multiple albums now so we could
  • 00:03:47
    create this album inside the admin site
  • 00:03:48
    for us
  • 00:03:56
    has been created let's create a next
  • 00:03:58
    model that is the song Because song
  • 00:04:00
    going to be associated with the album so
  • 00:04:02
    I'm keeping as a foreign key with the
  • 00:04:04
    album
  • 00:04:11
    thumbnail because album thumbnail uh is
  • 00:04:15
    not going to help us here in a
  • 00:04:17
    nomenclature we should have a song thumb
  • 00:04:19
    thumbnail
  • 00:04:21
    which is going to be uploaded to the
  • 00:04:23
    thumbnail folder
  • 00:04:24
    now let's add a file field for our song
  • 00:04:27
    that is MP3 uh only MP3 we are going to
  • 00:04:30
    take for now
  • 00:04:32
    which is going to be uploaded to do
  • 00:04:33
    songs folder also with this one we are
  • 00:04:36
    going to add a song name that is we are
  • 00:04:38
    taking from the name of the song updated
  • 00:04:41
    and the last stated that is the default
  • 00:04:43
    one also the meta and the string
  • 00:04:45
    representation of the field and if it
  • 00:04:47
    from here
  • 00:04:49
    remember string representation only
  • 00:04:51
    being going to be have a string not an
  • 00:04:53
    integer or any type of other field
  • 00:04:56
    so lastly let's recap the relationship
  • 00:04:59
    here that artist going to have multiple
  • 00:05:02
    albums albums going to have multiple
  • 00:05:04
    songs now once we have created this uh
  • 00:05:07
    hierarchy now it's time for us to create
  • 00:05:10
    migrations
  • 00:05:12
    so to do some migration we will be
  • 00:05:13
    running python manager.pr make a
  • 00:05:15
    migration command but I am getting a
  • 00:05:17
    error here that is I haven't installed
  • 00:05:19
    the pillow because pillow is necessary
  • 00:05:21
    for the handling the images so let's
  • 00:05:23
    install that one here as well that is
  • 00:05:25
    below with the command called pip
  • 00:05:26
    install pillow this will install the
  • 00:05:29
    pillows latest version to the this
  • 00:05:31
    virtual environment that is we have
  • 00:05:33
    right here that is a music EnV once that
  • 00:05:37
    has been installed I am getting a
  • 00:05:38
    warning that my peep uh
  • 00:05:40
    version is is not update updated so
  • 00:05:44
    let's I've been going to update that one
  • 00:05:46
    with the command specified
  • 00:05:49
    once that has been done let's create our
  • 00:05:51
    uh migrations that with the same command
  • 00:05:53
    and you can see I have created these
  • 00:05:55
    three models album songs and artists to
  • 00:05:59
    our migrations file
  • 00:06:02
    once uh migration is ready let's migrate
  • 00:06:05
    this whole tables to our database so it
  • 00:06:08
    could get applied so I am just checking
  • 00:06:10
    here that if the our initial is zero
  • 00:06:13
    zero zero zero zero one music initial
  • 00:06:15
    has been applied or not you can see in
  • 00:06:17
    the bottom second bottom name that is
  • 00:06:20
    there yeah so we have our migration has
  • 00:06:23
    been so we don't have to run a specific
  • 00:06:25
    migration for our app
  • 00:06:27
    so after the migrations we base how to
  • 00:06:30
    add our whole tables to the admin side
  • 00:06:32
    so here I am adding those things with
  • 00:06:35
    inside the admin.py this uh will be
  • 00:06:37
    including the fields that is an uh
  • 00:06:40
    artist name and the created last last
  • 00:06:42
    updated whatever the feeder fields are
  • 00:06:44
    there for all the models you need to add
  • 00:06:47
    that one as a stream parameter we are
  • 00:06:49
    only taking consideration of the list
  • 00:06:51
    display there are many options here but
  • 00:06:53
    we are not taking that one right now
  • 00:06:58
    so once you have added that uh admin
  • 00:07:00
    then you can or we will have to create
  • 00:07:04
    one more user for this one because we
  • 00:07:06
    haven't created user at uh till now that
  • 00:07:08
    user going to be super user for this
  • 00:07:10
    whole admin so let's open our terminal
  • 00:07:12
    let's type on the command called
  • 00:07:14
    pythonmanage.py create a super user
  • 00:07:17
    let's just hit enter
  • 00:07:20
    it's asking us a username so I'm giving
  • 00:07:22
    as a music as a username just type on
  • 00:07:24
    the email email we are not specifying
  • 00:07:26
    here then password
  • 00:07:28
    I am keeping as a short password
  • 00:07:31
    look like I haven't to match that one
  • 00:07:32
    correctly
  • 00:07:34
    this match and yeah we are good to go
  • 00:07:37
    now so I'm just going to open my Open my
  • 00:07:41
    Chrome browser and run this project
  • 00:07:43
    there
  • 00:07:44
    before running make sure that you have
  • 00:07:46
    run may run the command called run
  • 00:07:48
    server
  • 00:07:49
    just log in here with your connect
  • 00:07:51
    relation that you have just created
  • 00:07:53
    with the music and the password oops
  • 00:07:57
    now again the password
  • 00:08:00
    yeah so we have that admin area for us
  • 00:08:02
    here where we have all the tables that
  • 00:08:06
    is for music app we have albums artists
  • 00:08:08
    and songs you can see the data is not
  • 00:08:11
    there right now we will have to add the
  • 00:08:12
    data and the default one authentication
  • 00:08:15
    are the users and the groups we will
  • 00:08:17
    talk about more on the groups and users
  • 00:08:18
    in the later videos whenever we get a
  • 00:08:21
    chance
  • 00:08:21
    [Music]
  • 00:08:24
    now as we have created our models as
  • 00:08:27
    well now let's import our data that is
  • 00:08:30
    files and whatever it is now I'm using a
  • 00:08:33
    purple cat.com uh this is a website
  • 00:08:35
    where from I have downloaded some of the
  • 00:08:37
    tracks it will be laughing tracks
  • 00:08:39
    basically
  • 00:08:40
    and uh let's try to add that one inside
  • 00:08:43
    the database so here I am inside the uh
  • 00:08:46
    first of all we will have to add artist
  • 00:08:48
    because that is a first thing we will
  • 00:08:50
    have to do so artist name I mean I'm
  • 00:08:53
    giving as a purple cat because that is
  • 00:08:55
    the author uh name as well
  • 00:08:58
    so once that has been added here let's
  • 00:09:01
    go to the albums and then let's create a
  • 00:09:03
    album for the artist
  • 00:09:05
    so to create the album just add one
  • 00:09:08
    click on ADD album and just type on the
  • 00:09:10
    name of the album anything I'm here here
  • 00:09:12
    gaming let's say laughing music and
  • 00:09:15
    associating with the purple cat
  • 00:09:18
    click on save this will add one entry to
  • 00:09:20
    our database giving the name of the
  • 00:09:23
    purple line my purple cat sorry and the
  • 00:09:25
    album name so once that has been added
  • 00:09:28
    let's go to our setting.py and add two
  • 00:09:32
    things that is a static URL and static
  • 00:09:34
    route with that one's media URL and the
  • 00:09:36
    media root so these are helpful for us
  • 00:09:38
    to add the files to our project and the
  • 00:09:43
    gaping a particular URL as well
  • 00:09:46
    so what that one added uh go to the
  • 00:09:49
    urls.py main url.py and I add this two
  • 00:09:52
    things that is static with the media URL
  • 00:09:55
    and the media root with the static URL
  • 00:09:58
    and static root this is necessary to
  • 00:10:00
    build a URL for particular file and the
  • 00:10:03
    resource that we are saving to our
  • 00:10:04
    database
  • 00:10:05
    so I'm just uh
  • 00:10:08
    restarting our server and go to the now
  • 00:10:11
    Chrome just refresh once and now just
  • 00:10:14
    click on the
  • 00:10:16
    add sum
  • 00:10:18
    so adding a song is easy just to select
  • 00:10:20
    the album then the file then the
  • 00:10:24
    MP3 file that we wanted to put so
  • 00:10:27
    basically there are two things uh
  • 00:10:29
    thumbnail and the file so I have
  • 00:10:31
    downloaded some of the files from the
  • 00:10:33
    internet that is images random images
  • 00:10:36
    and I'm just associating with the with
  • 00:10:38
    our files here you can see our thumbnail
  • 00:10:42
    has been loaded correctly so meaning
  • 00:10:44
    that our static root and static URL are
  • 00:10:46
    working fine with the mirror as as well
  • 00:10:49
    so these are going to the our media
  • 00:10:51
    folder that is a song songs folder and
  • 00:10:54
    with the thumbnail going to the
  • 00:10:55
    thumbnail folder
  • 00:10:57
    so I'm just going to speed up this
  • 00:10:59
    process because I'm just going to add on
  • 00:11:01
    some multiple files here
  • 00:11:19
    now once uh this that process is
  • 00:11:21
    completed you can see we have all the
  • 00:11:22
    files here the indexing is starting from
  • 00:11:24
    2 because uh one of the entry I have
  • 00:11:27
    deleted previously that was not working
  • 00:11:29
    so you can see it start indexing is
  • 00:11:31
    starting from that two to an onwards so
  • 00:11:34
    uh if I go to the our home page that is
  • 00:11:37
    uh on the root IP address you can see
  • 00:11:39
    there is no URL or page not phone you
  • 00:11:41
    know right now because we haven't added
  • 00:11:43
    any page or something to our
  • 00:11:47
    our project it
  • 00:11:49
    so next thing is we will be doing is
  • 00:11:51
    like we will be adding a page where we
  • 00:11:54
    will be able to see the all the music
  • 00:11:57
    and the thumbnail with the artist name
  • 00:11:59
    and the Sorting them out on the front
  • 00:12:01
    page
  • 00:12:04
    now let's try to add our URLs basically
  • 00:12:06
    we are going to register our URLs from
  • 00:12:09
    the app that is music app
  • 00:12:11
    so I'm going to copy the whole structure
  • 00:12:14
    forms our root URL that is hold this
  • 00:12:18
    admin and blog and all these things
  • 00:12:19
    but before that one we will have to
  • 00:12:21
    register our main music app so I'm just
  • 00:12:23
    adding that one here like that path and
  • 00:12:25
    the include
  • 00:12:27
    and then music dot urls
  • 00:12:30
    so next thing I will I will have to do
  • 00:12:33
    is like I will have to create one file
  • 00:12:35
    inside our music app that is urls.py for
  • 00:12:38
    the URLs for the music apps
  • 00:12:47
    no once that has been created I will go
  • 00:12:49
    to the my main viewerl.py copy all the
  • 00:12:52
    things paste it there remove unnecessary
  • 00:12:54
    things from here and admin also with the
  • 00:12:58
    include 2 because we don't need that one
  • 00:13:01
    and unnecessary Imports as well
  • 00:13:11
    now we in the path we will have to
  • 00:13:14
    specify views which we this path going
  • 00:13:16
    to handle then name of the view name of
  • 00:13:19
    the view will be going to hand help us
  • 00:13:21
    to identify this path in whole project
  • 00:13:25
    so let's go to the view Dot py views.py
  • 00:13:28
    and create a one uh view there which
  • 00:13:31
    will going to handle the main template
  • 00:13:33
    or a main page of the this project where
  • 00:13:35
    we will going to list out all the musics
  • 00:13:39
    played
  • 00:13:46
    and played
  • 00:13:51
    now what's the basic view is ready let's
  • 00:13:53
    create a templates folder where we will
  • 00:13:55
    be putting our whole uh HTML kind of a
  • 00:13:59
    templates so the main template name is
  • 00:14:01
    index.html
  • 00:14:06
    now the once the template is ready let's
  • 00:14:09
    go and add our bootstrap so I'm using
  • 00:14:11
    bootstrap 5 version 5 here uh go to the
  • 00:14:14
    bottom and there is a starter template
  • 00:14:16
    copy the template and move to the
  • 00:14:17
    index.html file so I'm just renaming the
  • 00:14:20
    title here so from Hell over to open
  • 00:14:25
    source
  • 00:14:27
    music project or a player
  • 00:14:37
    I am also removing the unnecessary
  • 00:14:39
    JavaScript JavaScript from here bottom
  • 00:14:42
    to make it clean
  • 00:14:46
    now what's the uh we have added that
  • 00:14:48
    basic template let's go to the urls.py
  • 00:14:51
    and it's music app url.py add a view and
  • 00:14:54
    name of The View
  • 00:14:56
    like this one
  • 00:14:57
    and it should be okay now
  • 00:15:01
    for rendering on the main page
  • 00:15:06
    so if I if I refresh you can see the
  • 00:15:08
    open source music player has been
  • 00:15:10
    rendered correctly meaning that it's
  • 00:15:12
    working fine
  • 00:15:13
    so now I am going to add a now bar to
  • 00:15:15
    our project
  • 00:15:16
    so I will type in the search DOC number
  • 00:15:19
    then
  • 00:15:23
    copy this template basic template from
  • 00:15:25
    here
  • 00:15:27
    go to the index.html file add it there
  • 00:15:29
    as well
  • 00:15:31
    and then I will going to remove
  • 00:15:32
    unnecessary code from it
  • 00:15:41
    remember on the main page of the numbers
  • 00:15:43
    that documentation there are many
  • 00:15:45
    examples you can see
  • 00:15:48
    but we are taking this ah only the basic
  • 00:15:52
    example where the search bar is on the
  • 00:15:53
    right hand side and the name of the
  • 00:15:55
    project is on the right left hand side
  • 00:16:02
    refresh it you can see the number has
  • 00:16:04
    been rendered correctly so I've just
  • 00:16:06
    remove the H1 tag from Top
  • 00:16:08
    and refresh again you can see our
  • 00:16:11
    project has been I'm sorry our template
  • 00:16:13
    has been rendered successfully or
  • 00:16:15
    correctly you can say
  • 00:16:17
    so just rename the things like name of
  • 00:16:20
    the project like Navar then provide the
  • 00:16:23
    basic URL there which will be very much
  • 00:16:26
    the user going to click on the text it
  • 00:16:28
    will enter to the home page so like that
  • 00:16:30
    one too
  • 00:16:37
    now the to the search input uh sorry
  • 00:16:40
    search form give the method as a post
  • 00:16:42
    and also
  • 00:16:45
    because this is this going to be going
  • 00:16:47
    to be search for us something on the
  • 00:16:49
    platform here I can you can see I forgot
  • 00:16:51
    about the csrf token so I'm just going
  • 00:16:53
    to add that one here and refresh again
  • 00:16:56
    and try to post blank post it should
  • 00:16:59
    work fine like it is working fine and
  • 00:17:01
    you can say that there is a 200 uh post
  • 00:17:03
    request also for the EU
  • 00:17:05
    on the slashy water
  • 00:17:09
    now I go to the bootstrap template then
  • 00:17:12
    I search for the cards so cards will be
  • 00:17:14
    helpful for us to align on the left hand
  • 00:17:16
    side image the right hand side will be
  • 00:17:18
    text and then far away right will be the
  • 00:17:20
    button to play the particular song
  • 00:17:23
    so I'm just checking here a template
  • 00:17:24
    which can be useful for that particular
  • 00:17:26
    structure
  • 00:17:28
    So Below you can see we have the
  • 00:17:32
    template here
  • 00:17:34
    which has on the left hand side has a
  • 00:17:36
    image right hand side has some text and
  • 00:17:39
    the far right we can also add one more
  • 00:17:41
    column where we can put our say but
  • 00:17:46
    playing button or pause button basically
  • 00:17:49
    so just copy that template go to the
  • 00:17:51
    main home page just pet space today
  • 00:17:56
    before pasting just let's create one
  • 00:17:58
    container so it could be remain in the
  • 00:18:00
    you know in the middle of the page
  • 00:18:06
    and paste it there once been pasted just
  • 00:18:09
    remove the style we don't need that
  • 00:18:11
    style we want to do to be horizontally
  • 00:18:13
    full width so just refresh again to see
  • 00:18:16
    the output yeah we have the output
  • 00:18:18
    correctly
  • 00:18:19
    now we will just going to update this
  • 00:18:21
    kind of a text from this card with the
  • 00:18:24
    actual Dynamic content to do so I will
  • 00:18:27
    go to the user py and take out I will
  • 00:18:30
    write out the first query for the whole
  • 00:18:32
    table that is taking the old data that
  • 00:18:35
    is all the music from the our model that
  • 00:18:37
    is a song model so I'm just going to
  • 00:18:40
    import that inside here uh in into the
  • 00:18:42
    view.speaker
  • 00:18:44
    like from dot models dot I am using
  • 00:18:46
    because this is just a existing folder
  • 00:18:49
    and I just need to go to the a previous
  • 00:18:52
    file structure so I just used dot for
  • 00:18:55
    there and import the song from it and
  • 00:18:59
    then I just query it as a get to get the
  • 00:19:01
    all objects or all the data that is
  • 00:19:03
    objectives on it'll be flipple
  • 00:19:06
    I then pass it to the one variable that
  • 00:19:08
    is all songs now I am going to the uh
  • 00:19:11
    take out one song from all songs with
  • 00:19:13
    the for Loop you can see the for Loop
  • 00:19:15
    has been created by this way so it calls
  • 00:19:18
    ginger templating in the ginger we write
  • 00:19:21
    the for Loop like this one
  • 00:19:28
    just align the content correctly to the
  • 00:19:30
    page
  • 00:19:32
    and then a source will be the name URL
  • 00:19:35
    of this thumbnail that is there so song
  • 00:19:38
    Dot Song thumbnail dot URL will be the
  • 00:19:41
    ah
  • 00:19:44
    providing us a path from the media
  • 00:19:47
    folder remember the thumbnail algorithm
  • 00:19:49
    going to be saved in the media and then
  • 00:19:51
    thumbnail folder so it will come from
  • 00:19:53
    that particular way also a text could be
  • 00:19:56
    like a song name it could be easy to
  • 00:19:58
    give
  • 00:19:59
    and same goes for the song
  • 00:20:03
    so first of all let's add the song name
  • 00:20:07
    it's uh to the card title let's replace
  • 00:20:10
    that one too
  • 00:20:13
    so once the card title has been replaced
  • 00:20:15
    let's go to add a
  • 00:20:21
    album name so album name will be to the
  • 00:20:24
    card text that is
  • 00:20:26
    we will be taking as a song
  • 00:20:28
    Dot and then name uh album
  • 00:20:35
    and it will be from
  • 00:20:38
    so meaning that this song is taken from
  • 00:20:40
    this album
  • 00:20:49
    now I'm going to copy the last updated
  • 00:20:52
    and we're going to put into the below
  • 00:20:56
    cortex that is last updated on on
  • 00:20:59
    particular time so the time will be
  • 00:21:00
    coming from last updated and the
  • 00:21:03
    template filter we are using is a time
  • 00:21:05
    since meaning that this has been uh
  • 00:21:08
    taking from particular time sense
  • 00:21:11
    so you can see the text has been
  • 00:21:13
    rendered so last updated time and
  • 00:21:16
    minutes ago
  • 00:21:18
    the text or sorry the media also been
  • 00:21:20
    rendered correctly and the name all the
  • 00:21:22
    things are rendered correctly you can
  • 00:21:24
    see here
  • 00:21:26
    now next part is to create one more uh
  • 00:21:29
    du which will be going to handle our
  • 00:21:31
    uh what we can say
  • 00:21:34
    music music or play and pause things
  • 00:21:38
    so what are we going to do is I will
  • 00:21:40
    just go
  • 00:21:43
    first of all I'm just re-structuring the
  • 00:21:45
    data that is adding a margin or margin
  • 00:21:47
    or something
  • 00:21:48
    on the top merging will be three uh
  • 00:21:52
    REM
  • 00:21:54
    remember that REM 1 REM equals to
  • 00:21:58
    16px so it will be 16 into 3 is equals
  • 00:22:02
    to
  • 00:22:02
    4 t x p x from the top
  • 00:22:07
    um again restructuring it with the
  • 00:22:08
    columns so this is useful for you know
  • 00:22:11
    the you know the image size has been too
  • 00:22:15
    much so I'm just restructuring that one
  • 00:22:17
    to two column and adding eight columns
  • 00:22:19
    at the cities for the text
  • 00:22:23
    [Music]
  • 00:22:24
    once the touch has been
  • 00:22:26
    um updated let's create a one more
  • 00:22:28
    column and uh that column will be two
  • 00:22:31
    columns
  • 00:22:31
    with the play button
  • 00:22:34
    so this play button basically going to
  • 00:22:36
    handle our
  • 00:22:38
    play and pause things so let's try
  • 00:22:51
    let's now add icon for that one that is
  • 00:22:53
    play button icon so I go to the icons of
  • 00:22:56
    bootstrap then I can
  • 00:23:00
    and I can type on play you can see there
  • 00:23:02
    are many icons these are the three icons
  • 00:23:04
    so you can use it in one project so I'm
  • 00:23:06
    just clicking on that play circle one
  • 00:23:10
    and copy the SVG orbit
  • 00:23:13
    come to the project just paste it so it
  • 00:23:16
    will
  • 00:23:17
    render the size of it and also I'm
  • 00:23:19
    adjusting the size SVG has this feature
  • 00:23:22
    that it's a major feature that we could
  • 00:23:24
    adjust the height accordingly heightened
  • 00:23:26
    with accordingly the needle we have
  • 00:23:29
    you can see the image or a SVG button
  • 00:23:32
    has been rendered correctly
  • 00:23:34
    so I will try here some basic thing like
  • 00:23:36
    making it align to the center
  • 00:23:39
    and the middle
  • 00:23:41
    so it can remain floating around in a
  • 00:23:44
    particular height
  • 00:23:45
    to do so uh I will just try to add the
  • 00:23:48
    display Flex here
  • 00:23:50
    it's a property
  • 00:23:52
    CSS property basically
  • 00:23:59
    and with that one I will also add align
  • 00:24:02
    items this will align the items to the
  • 00:24:05
    center
  • 00:24:15
    okay you can see there is a width issue
  • 00:24:18
    or height issue
  • 00:24:20
    so I just added the height a hundred
  • 00:24:22
    percent here I will just try to add a
  • 00:24:23
    width as well but I guess we will not uh
  • 00:24:26
    healthy help us here to make it
  • 00:24:28
    stretchable
  • 00:24:29
    another property we could use a uh
  • 00:24:32
    justify content
  • 00:24:35
    that should help us to stretch it out
  • 00:24:37
    the content to the very end
  • 00:24:42
    so for justify content I'm using a
  • 00:24:44
    property called Center
  • 00:24:46
    so this will align the content to the
  • 00:24:48
    center of the tube so play button is the
  • 00:24:51
    menu so just a buy content will
  • 00:24:53
    accordingly add
  • 00:24:54
    to the center of it that play button
  • 00:24:57
    will be around
  • 00:24:58
    so once that has been added I'm just
  • 00:25:00
    adding those bootstrap classes here for
  • 00:25:03
    play button
  • 00:25:04
    like display plugs then justify content
  • 00:25:07
    Center then align items also Center
  • 00:25:11
    and we are 100 H dash hundred will be
  • 00:25:15
    800 so these are the basically the
  • 00:25:17
    predefined classes inside the booster
  • 00:25:19
    that will be helpful for us to maintain
  • 00:25:21
    the you will say simplify the creating
  • 00:25:24
    the classes and the CSS it's it's
  • 00:25:26
    important to understand this is just
  • 00:25:28
    simply find the CSS for us by
  • 00:25:31
    predefining us some particular way
  • 00:25:33
    you can see our whole structure has been
  • 00:25:36
    aligned Center
  • 00:25:37
    the next thing we will have to do is
  • 00:25:39
    like
  • 00:25:40
    to add some gold to play and pause the
  • 00:25:43
    particular track
  • 00:25:44
    also with that one play if the user is
  • 00:25:48
    clicking on the play button then if
  • 00:25:50
    there is any existing uh
  • 00:25:52
    song is playing that should be got
  • 00:25:53
    paused and the current Source song which
  • 00:25:56
    on which the user has clicked should be
  • 00:25:58
    get played
  • 00:26:01
    right so in meantime I am just uh
  • 00:26:04
    readjusting the height and width here
  • 00:26:06
    for our play button I'm just playing
  • 00:26:07
    around with the heightened with no beat
  • 00:26:11
    now to add a Javas or sorry to add a
  • 00:26:16
    file audio file we will have to create
  • 00:26:18
    one more view that I will call it as a
  • 00:26:21
    audio file div where I will just copy
  • 00:26:24
    and paste the some basic HTML for the
  • 00:26:26
    audio so I have created this uh for div
  • 00:26:29
    I go to the search bar and then type on
  • 00:26:32
    HTML audio
  • 00:26:35
    tag
  • 00:26:37
    so you can see the HTML basic tag is
  • 00:26:40
    here I've just copy this all the things
  • 00:26:42
    from here
  • 00:26:44
    with the controls as well because we
  • 00:26:46
    might need a controls
  • 00:26:48
    and I will just remove that OGG file
  • 00:26:51
    type
  • 00:26:52
    because we don't need it because anyway
  • 00:26:54
    the MP3 file going to be MPEG so it
  • 00:26:57
    doesn't need us we don't need that one
  • 00:26:59
    right now
  • 00:27:00
    and the source I am going to say song
  • 00:27:02
    dot song that is there
  • 00:27:05
    I will just try to render it
  • 00:27:10
    so you can see in the background the
  • 00:27:12
    files has been little but I guess it's
  • 00:27:14
    not working because of file path is not
  • 00:27:16
    correctly specified for the same
  • 00:27:19
    just try to debug that one so I just
  • 00:27:22
    inspect
  • 00:27:23
    go to the console you can see the
  • 00:27:26
    server responded status with the 404
  • 00:27:28
    meaning that is path or something is
  • 00:27:30
    missing for that one to again re-verify
  • 00:27:33
    that one what we can do is like
  • 00:27:36
    we could inspect it
  • 00:27:42
    one more thing we could do is like
  • 00:27:43
    before inspecting it we could go to the
  • 00:27:45
    admin check out that the data is
  • 00:27:47
    available or not also that may not be
  • 00:27:49
    the case so I just go to the music admin
  • 00:27:52
    admin site and I will just click on the
  • 00:27:55
    percent that we have created so just
  • 00:27:57
    create a click on that particular entry
  • 00:27:59
    and you can see the stack is okay but
  • 00:28:02
    you can see the path of it that is
  • 00:28:03
    coming from media then songs and then
  • 00:28:05
    the name of the particular file name
  • 00:28:07
    right so if I go again to our main site
  • 00:28:11
    so I will just duplicate this page
  • 00:28:13
    and remove the path of it
  • 00:28:17
    right hit enter
  • 00:28:21
    now I again go to inspect this
  • 00:28:24
    particular page
  • 00:28:32
    now if I go to the console again
  • 00:28:36
    server is
  • 00:28:37
    showing as a 404 you can see it's inside
  • 00:28:41
    the media folder the source is correct
  • 00:28:44
    but I guess we forgot about the path of
  • 00:28:46
    it so I just click on that particular I
  • 00:28:48
    just open that particular file that is
  • 00:28:50
    there
  • 00:28:51
    that is audio file and then audio and
  • 00:28:53
    you can see the songs is not having a
  • 00:28:57
    prefix of the media
  • 00:28:59
    so you can see the media is there but uh
  • 00:29:01
    in a HTML page we don't have that one
  • 00:29:03
    sometime you may be able to find out
  • 00:29:05
    this kind of errors on your project as
  • 00:29:06
    well so basically what you need to do is
  • 00:29:08
    like for the URL sorry to the file or
  • 00:29:11
    whatever it is just put a dot URL so
  • 00:29:13
    that will specify the mid uh
  • 00:29:16
    path from our media folder media our
  • 00:29:18
    study folder whatever depending upon the
  • 00:29:21
    source or folder you can see
  • 00:29:24
    so you can see if I play it it's getting
  • 00:29:26
    played and also it's also getting
  • 00:29:28
    downloaded for buffering buffering part
  • 00:29:32
    so I'm just keeping as a display none
  • 00:29:34
    because we don't want to say show it we
  • 00:29:36
    just want to know on click of any play
  • 00:29:38
    button we just want to play particular
  • 00:29:41
    track for particular that card right
  • 00:29:46
    so to do so I will just create a one
  • 00:29:49
    more folder here called Static that will
  • 00:29:52
    handle our JavaScript CSS files or a
  • 00:29:55
    static uh I can say images also also
  • 00:29:59
    I've been going to create them in dot JS
  • 00:30:01
    file with that one I'm creating one
  • 00:30:03
    folder as well JS and moving that to the
  • 00:30:06
    main JS code uh main JS full
  • 00:30:10
    so in a JS file I'm just pasting that
  • 00:30:14
    some code
  • 00:30:17
    now once the JS file is ready I'm just
  • 00:30:20
    going to
  • 00:30:24
    load static because we want to load the
  • 00:30:27
    that JavaScript file from our that
  • 00:30:29
    static folder so that needs to be loaded
  • 00:30:31
    from by the stack or static so just
  • 00:30:34
    create a tag script and so in Source
  • 00:30:36
    just type on static
  • 00:30:38
    like this one and the provide the
  • 00:30:41
    JavaScript folder and then the file name
  • 00:30:44
    that is main.js this will render our
  • 00:30:46
    file to our browser
  • 00:30:48
    closer remember to close the JavaScript
  • 00:30:50
    tagged assets
  • 00:31:02
    so we have we are not able to find out
  • 00:31:04
    the JavaScript file okay so if I re
  • 00:31:08
    restarted the server you can see I'm now
  • 00:31:11
    getting a jQuery error
  • 00:31:13
    so I go to jquery.com it's the simplest
  • 00:31:17
    way to go there and go to the section
  • 00:31:20
    where you can find out the link to the
  • 00:31:22
    JavaScript
  • 00:31:23
    that is https link basically go to the
  • 00:31:26
    main.html file index.html file and then
  • 00:31:30
    created one more script tag with that
  • 00:31:32
    one add that source to it that will load
  • 00:31:35
    our jQuery from that particular URL that
  • 00:31:38
    is code.jquery.com and the main jQuery
  • 00:31:42
    is latest version you can see it's a
  • 00:31:44
    3.6.3
  • 00:31:46
    so if I refresh the page again the error
  • 00:31:50
    should go because that is how it is
  • 00:31:53
    now to understand the next thing for
  • 00:31:55
    this project we will have to consider
  • 00:31:57
    this use cases use a click on play
  • 00:31:58
    button it could go to the either go to
  • 00:32:01
    the pause
  • 00:32:02
    the next thing will be the pause uh
  • 00:32:04
    State for the particular sum so if if
  • 00:32:07
    there is any current sound then play it
  • 00:32:13
    or if there is any existing song or
  • 00:32:16
    running on the browser just pause it
  • 00:32:19
    and both if the those after completing
  • 00:32:22
    this both options just play the current
  • 00:32:24
    clicked song
  • 00:32:29
    so to do so I have added this I'm going
  • 00:32:31
    to add this code to our Javascript file
  • 00:32:33
    basically so I'm just clicking on the
  • 00:32:35
    play button SVG
  • 00:32:37
    one certificate click I am just
  • 00:32:38
    preventing that this should not refresh
  • 00:32:40
    the page
  • 00:32:41
    after that one I am just clicking taking
  • 00:32:43
    the pause button if there is any pause
  • 00:32:45
    button uh class on our page so I'm
  • 00:32:48
    selecting that one I'm just iterating
  • 00:32:50
    through the pause button and uh I'm just
  • 00:32:53
    getting through it inside the one
  • 00:32:55
    element that is uh it's a constant
  • 00:32:59
    with the getting or eliminate so to the
  • 00:33:02
    element I am checking if there is a uh
  • 00:33:04
    I'm removing the pause button class from
  • 00:33:06
    it then adding a play button class to it
  • 00:33:09
    then I will I'm just trying to find out
  • 00:33:12
    the what is the audio file for this
  • 00:33:14
    particular card on which the pause
  • 00:33:16
    button or play button has been clicked
  • 00:33:18
    with the element.wire apparent element
  • 00:33:20
    dot query selector with the audio file
  • 00:33:22
    audio and pause it basically
  • 00:33:25
    and then update the SVG to the play
  • 00:33:28
    button
  • 00:33:31
    now once this has been done I'm just uh
  • 00:33:34
    finding out the current audio file for
  • 00:33:36
    whenever the user click on the
  • 00:33:37
    particular card only
  • 00:33:39
    and uh with that one
  • 00:33:44
    finding out the play button as well with
  • 00:33:47
    the play button class then adding a one
  • 00:33:50
    more class to it that is the pause
  • 00:33:51
    button updating the SVG to the pause SVG
  • 00:33:55
    this process which I have also taken
  • 00:33:57
    from the bootstrap icons remember that
  • 00:33:59
    one and then I am just playing that uh
  • 00:34:02
    audio file with the play class
  • 00:34:04
    or a play function sorry
  • 00:34:06
    so another class we will have to do is
  • 00:34:08
    like whenever click on some someone
  • 00:34:10
    click on the pause button so if someone
  • 00:34:12
    click on the plus pause SVG then we were
  • 00:34:15
    preventing to re-reficiate
  • 00:34:18
    then finding the audio file then the
  • 00:34:21
    audio button sorry pause button
  • 00:34:23
    basically that pause icon pause the
  • 00:34:25
    class basically then uh taking that
  • 00:34:28
    pause removing that pause uh button
  • 00:34:31
    class then adding a play button class to
  • 00:34:34
    it because we wanted to show the play
  • 00:34:35
    button whenever there's a pause
  • 00:34:37
    and the re-updating the whole HTML again
  • 00:34:41
    with the walls sorry play icon so you
  • 00:34:44
    can see here in a demo if I click on any
  • 00:34:47
    uh button the button play and pause play
  • 00:34:49
    and Clause has been on getting updated
  • 00:34:51
    correctly
  • 00:34:56
    [Music]
  • 00:34:57
    now let's discuss about the problem that
  • 00:34:59
    we need to uh solve from this open
  • 00:35:01
    source project first problem will be
  • 00:35:03
    like creating a form and uploading the
  • 00:35:05
    songs so these songs and the uploading
  • 00:35:08
    uploadation will be having some
  • 00:35:09
    hierarchies it called China drop downs
  • 00:35:12
    basically first of all user going to
  • 00:35:15
    select the artist then the album related
  • 00:35:17
    to the artist this should be uh chain
  • 00:35:20
    like uh take someone selected One
  • 00:35:23
    Republic then their albums should come
  • 00:35:25
    album labels should come not the other
  • 00:35:27
    persons so by selecting the album user
  • 00:35:30
    can upload a song with the name and the
  • 00:35:32
    thumbnail of the image so this will be
  • 00:35:34
    one form where
  • 00:35:37
    contributor has to work on
  • 00:35:40
    then second issue is like
  • 00:35:43
    let's go to the second issue that is the
  • 00:35:45
    search functionality so the search
  • 00:35:47
    function is basically going to uh scroll
  • 00:35:50
    crawl through artist name album name and
  • 00:35:52
    the song name so anything matches with
  • 00:35:55
    anything from these three should return
  • 00:35:57
    a result to the browser so it's just
  • 00:35:59
    it's the most simplest one to solve then
  • 00:36:02
    just go to the third one third one is
  • 00:36:04
    like capture the number of times the
  • 00:36:05
    song has been played it it kind of like
  • 00:36:07
    uh finding the views on a LinkedIn page
  • 00:36:10
    like how many people have views viewed
  • 00:36:11
    that particular post or a viewed a video
  • 00:36:14
    on the YouTube so this kind of a thing
  • 00:36:16
    this will be uh Anonymous so we will not
  • 00:36:19
    be able to track down or know who has
  • 00:36:22
    viewed the particular song or who has
  • 00:36:23
    played the song So this should be
  • 00:36:25
    anonymous it should be just a counter
  • 00:36:27
    and it should contain a model to store
  • 00:36:29
    this values and uh the flow of it
  • 00:36:34
    then the fourth uh problem is like
  • 00:36:39
    our token was based playlist saving so
  • 00:36:42
    meaning that the whenever you or someone
  • 00:36:44
    come to the platform they should not
  • 00:36:46
    require to log into our our platform
  • 00:36:48
    they should be a token where with by
  • 00:36:51
    that token they could remember that they
  • 00:36:54
    have a slight particular song from our
  • 00:36:56
    platform meaning that we also need to
  • 00:36:58
    implement the like functionality with
  • 00:37:00
    the same same thing so I will again
  • 00:37:02
    going to create a one more uh issue on
  • 00:37:04
    this one that like functionality should
  • 00:37:06
    be get added so token will be a 15 digit
  • 00:37:09
    uh 15 characters or a 10 characters
  • 00:37:12
    depending upon the user or it could be a
  • 00:37:13
    string that user could enter so meaning
  • 00:37:16
    that it could be a generated randomly or
  • 00:37:18
    by user Choice as well so these two
  • 00:37:20
    things should be considered while
  • 00:37:22
    creating the token best place same
  • 00:37:25
    so these are the four uh issues that I
  • 00:37:28
    have created the fifth one is like
  • 00:37:30
    simplest one is to create the Json file
  • 00:37:34
    to store the properties for the
  • 00:37:36
    production like a
  • 00:37:38
    Force should be ah sorry debug should be
  • 00:37:40
    false then secret key should be
  • 00:37:42
    different on the different environments
  • 00:37:44
    as well so this kind of a structure that
  • 00:37:46
    needs to be solved or is kept in even
  • 00:37:49
    EnV file so uh you can visit this link
  • 00:37:52
    that is the dog dogs uh
  • 00:37:55
    how to deploy uh
  • 00:37:57
    Django project on the server it has a
  • 00:38:00
    different uh scenarios where we should
  • 00:38:02
    look into for example uh
  • 00:38:05
    checking the HDI file or checking the
  • 00:38:08
    deploy requirement as well
  • 00:38:11
    so these are the five issue that we need
  • 00:38:13
    to look into first of all and more will
  • 00:38:16
    be coming when we are starting uh
  • 00:38:17
    getting a pull request from the peoples
  • 00:38:19
    like you
  • 00:38:21
    so looking forward from you to get some
  • 00:38:25
    you know work on this one
  • 00:38:28
    with this one I'm also uh I have also
  • 00:38:30
    deployed our application to this URL the
  • 00:38:32
    URL is also provided inside the GitHub
  • 00:38:34
    account
  • 00:38:35
    and also the uh video that is going to
  • 00:38:38
    explain this one also containing the
  • 00:38:39
    your same URL that like this one so here
  • 00:38:42
    you can play around with the different
  • 00:38:43
    uh use cases as well and you can also
  • 00:38:46
    set up this kind of environment on your
  • 00:38:47
    local machine
  • 00:38:49
    so do contribute and make your resume
  • 00:38:51
    much more better to discuss with your
  • 00:38:54
    require uh recruitment person to have a
  • 00:38:57
    little bit more talk and they will be
  • 00:38:59
    able to judge you based on that one
ใ‚ฟใ‚ฐ
  • Open Source
  • Django
  • Python
  • Virtual Environment
  • Music Management
  • Model Creation
  • Bootstrap
  • File Handling
  • Contributor Task
  • Web Development