├── manage.py
├── musics
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── form.py
    ├── helper.py
    ├── migrations
    │   ├── 0001_initial.py
    │   └── __init__.py
    ├── models.py
    ├── templatetags
    │   ├── __init__.py
    │   └── music_tags.py
    ├── tests.py
    ├── urls.py
    ├── validators.py
    └── views.py
├── requirements.txt
├── spotify_clone
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
├── templates
    ├── addPage.html
    └── home.html
└── theme
    ├── __init__.py
    ├── apps.py
    ├── static
        └── css
        │   ├── styles.css
        │   └── styles.css.map
    ├── static_src
        ├── package-lock.json
        ├── package.json
        ├── postcss.config.js
        ├── src
        │   └── styles.scss
        └── tailwind.config.js
    └── templates
        └── base.html


/manage.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | """Django's command-line utility for administrative tasks."""
 3 | import os
 4 | import sys
 5 | 
 6 | 
 7 | def main():
 8 |     """Run administrative tasks."""
 9 |     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'spotify_clone.settings')
10 |     try:
11 |         from django.core.management import execute_from_command_line
12 |     except ImportError as exc:
13 |         raise ImportError(
14 |             "Couldn't import Django. Are you sure it's installed and "
15 |             "available on your PYTHONPATH environment variable? Did you "
16 |             "forget to activate a virtual environment?"
17 |         ) from exc
18 |     execute_from_command_line(sys.argv)
19 | 
20 | 
21 | if __name__ == '__main__':
22 |     main()
23 | 


--------------------------------------------------------------------------------
/musics/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OtchereDev/django-spotify-clone/d42215f7bec8db3fbbee66624dd3289fc6c91ae2/musics/__init__.py


--------------------------------------------------------------------------------
/musics/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | from .models import Music,Album
3 | 
4 | admin.site.register(Music)
5 | admin.site.register(Album)


--------------------------------------------------------------------------------
/musics/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class MusicsConfig(AppConfig):
5 |     name = 'musics'
6 | 


--------------------------------------------------------------------------------
/musics/form.py:
--------------------------------------------------------------------------------
 1 | from django.forms import widgets
 2 | from musics.models import Music
 3 | from django import forms
 4 | 
 5 | class AddMusicForm(forms.ModelForm):
 6 |     album=forms.CharField(max_length=500,required=False)
 7 |     
 8 |     class Meta:
 9 |         model=Music
10 |         fields=[
11 |             'title',
12 |             'artiste',
13 |            
14 |             'audio_file',
15 |             'cover_image',
16 |         ]
17 | 


--------------------------------------------------------------------------------
/musics/helper.py:
--------------------------------------------------------------------------------
1 | from mutagen.mp3 import MP3
2 | 
3 | def get_audio_length(file):
4 |     audio = MP3(file)
5 |     return audio.info.length
6 |     


--------------------------------------------------------------------------------
/musics/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 3.1.5 on 2021-03-19 14:48
 2 | 
 3 | from django.db import migrations, models
 4 | import django.db.models.deletion
 5 | import musics.validators
 6 | 
 7 | 
 8 | class Migration(migrations.Migration):
 9 | 
10 |     initial = True
11 | 
12 |     dependencies = [
13 |     ]
14 | 
15 |     operations = [
16 |         migrations.CreateModel(
17 |             name='Album',
18 |             fields=[
19 |                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
20 |                 ('name', models.CharField(max_length=400)),
21 |             ],
22 |         ),
23 |         migrations.CreateModel(
24 |             name='Music',
25 |             fields=[
26 |                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
27 |                 ('title', models.CharField(max_length=500)),
28 |                 ('artiste', models.CharField(max_length=500)),
29 |                 ('time_length', models.DecimalField(blank=True, decimal_places=2, max_digits=20)),
30 |                 ('audio_file', models.FileField(upload_to='musics/', validators=[musics.validators.validate_is_audio])),
31 |                 ('cover_image', models.ImageField(upload_to='music_images/')),
32 |                 ('album', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='musics.album')),
33 |             ],
34 |         ),
35 |     ]
36 | 


--------------------------------------------------------------------------------
/musics/migrations/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OtchereDev/django-spotify-clone/d42215f7bec8db3fbbee66624dd3289fc6c91ae2/musics/migrations/__init__.py


--------------------------------------------------------------------------------
/musics/models.py:
--------------------------------------------------------------------------------
 1 | from musics.helper import get_audio_length
 2 | from django.db import models
 3 | from .validators import validate_is_audio
 4 | 
 5 | class Music(models.Model):
 6 |     title=models.CharField(max_length=500)
 7 |     artiste=models.CharField(max_length=500)
 8 |     album=models.ForeignKey('Album',on_delete=models.SET_NULL,null=True,blank=True)
 9 |     time_length=models.DecimalField(max_digits=20, decimal_places=2,blank=True)
10 |     audio_file=models.FileField(upload_to='musics/',validators=[validate_is_audio])
11 |     cover_image=models.ImageField(upload_to='music_images/')
12 | 
13 |     def save(self,*args, **kwargs):
14 |         if not self.time_length:
15 |             # logic for getting length of audio
16 |             audio_length=get_audio_length(self.audio_file)
17 |             self.time_length =f'{audio_length:.2f}'
18 | 
19 |         return super().save(*args, **kwargs)
20 | 
21 |     class META:
22 |         ordering="id"
23 | 
24 | 
25 | class Album(models.Model):
26 |     name=models.CharField(max_length=400)


--------------------------------------------------------------------------------
/musics/templatetags/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OtchereDev/django-spotify-clone/d42215f7bec8db3fbbee66624dd3289fc6c91ae2/musics/templatetags/__init__.py


--------------------------------------------------------------------------------
/musics/templatetags/music_tags.py:
--------------------------------------------------------------------------------
 1 | from django import template
 2 | import math
 3 | 
 4 | register=template.Library()
 5 | 
 6 | @register.filter
 7 | def time_formater(time):
 8 |     print(type(time))
 9 |     time=int(time)
10 |     min=math.floor((time%3600)/60)
11 |     sec=math.floor(time%60)
12 |     
13 |     if (sec<10):
14 |       sec=f"0{sec}"
15 |       
16 |     return f"{min}:{sec}"
17 |     


--------------------------------------------------------------------------------
/musics/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 | 
3 | # Create your tests here.
4 | 


--------------------------------------------------------------------------------
/musics/urls.py:
--------------------------------------------------------------------------------
 1 | from musics.views import addMusic, homePage, musicList
 2 | from django.urls import path
 3 | 
 4 | app_name='musics'
 5 | 
 6 | urlpatterns = [
 7 |     path('',homePage,name='home_page'), 
 8 |     path('add/',addMusic,name='add_music'),  
 9 | ]
10 | 


--------------------------------------------------------------------------------
/musics/validators.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | 
 3 | from django.core.exceptions import ValidationError
 4 | 
 5 | from mutagen.mp3 import MP3
 6 | 
 7 | 
 8 | def validate_is_audio(file):
 9 | 
10 |     try:
11 |         audio = MP3(file)
12 | 
13 |         if not audio :
14 |             raise TypeError()
15 | 
16 |         first_file_check=True
17 |         
18 |     except Exception as e:
19 |         first_file_check=False
20 |     
21 |     if not first_file_check:
22 |         raise ValidationError('Unsupported file type.')
23 |     valid_file_extensions = ['.mp3']
24 |     ext = os.path.splitext(file.name)[1]
25 |     if ext.lower() not in valid_file_extensions:
26 |         raise ValidationError('Unacceptable file extension.')
27 | 
28 | 


--------------------------------------------------------------------------------
/musics/views.py:
--------------------------------------------------------------------------------
 1 | from musics.models import Album, Music
 2 | from django.shortcuts import redirect, render
 3 | from django.http import JsonResponse
 4 | from .form import AddMusicForm
 5 | 
 6 | def homePage(request):
 7 |     musics=list(Music.objects.all().values())
 8 |     return render(request,'home.html',{
 9 |         'musics':musics
10 |     })
11 | 
12 | def addMusic(request):
13 |     form=AddMusicForm()
14 | 
15 |     if request.POST:
16 |         form=AddMusicForm(request.POST,request.FILES)
17 |      
18 |         if form.is_valid():
19 |             instance=form.save(commit=False)
20 |             album=form.cleaned_data.get('album')
21 |             if album:
22 |                 music_album=Album.objects.get_or_create(name=album)
23 |                 print(music_album)
24 |                 instance.album=music_album[0]
25 |                 instance.save()
26 |                 return redirect("music:home_page")
27 |             else:
28 |                 instance.save()
29 |                 return redirect("music:home_page")
30 | 
31 |         else:
32 |             print("no",form.data)
33 |     
34 |     return render(request,'addPage.html',{
35 |         'form':form
36 |     })
37 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | asgiref==3.3.1
2 | Django==3.1.7
3 | django-tailwind==1.2.0
4 | mutagen==1.45.1
5 | Pillow==8.1.2
6 | pytz==2021.1
7 | sqlparse==0.4.1
8 | 


--------------------------------------------------------------------------------
/spotify_clone/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OtchereDev/django-spotify-clone/d42215f7bec8db3fbbee66624dd3289fc6c91ae2/spotify_clone/__init__.py


--------------------------------------------------------------------------------
/spotify_clone/asgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | ASGI config for spotify_clone project.
 3 | 
 4 | It exposes the ASGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.asgi import get_asgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'spotify_clone.settings')
15 | 
16 | application = get_asgi_application()
17 | 


--------------------------------------------------------------------------------
/spotify_clone/settings.py:
--------------------------------------------------------------------------------
  1 | """
  2 | Django settings for spotify_clone project.
  3 | 
  4 | Generated by 'django-admin startproject' using Django 3.1.5.
  5 | 
  6 | For more information on this file, see
  7 | https://docs.djangoproject.com/en/3.1/topics/settings/
  8 | 
  9 | For the full list of settings and their values, see
 10 | https://docs.djangoproject.com/en/3.1/ref/settings/
 11 | """
 12 | 
 13 | from pathlib import Path
 14 | import os
 15 | 
 16 | # Build paths inside the project like this: BASE_DIR / 'subdir'.
 17 | BASE_DIR = Path(__file__).resolve().parent.parent
 18 | 
 19 | 
 20 | # Quick-start development settings - unsuitable for production
 21 | # See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
 22 | 
 23 | # SECURITY WARNING: keep the secret key used in production secret!
 24 | SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY')
 25 | 
 26 | # SECURITY WARNING: don't run with debug turned on in production!
 27 | DEBUG = True
 28 | 
 29 | ALLOWED_HOSTS = []
 30 | 
 31 | 
 32 | # Application definition
 33 | 
 34 | INSTALLED_APPS = [
 35 |     'django.contrib.admin',
 36 |     'django.contrib.auth',
 37 |     'django.contrib.contenttypes',
 38 |     'django.contrib.sessions',
 39 |     'django.contrib.messages',
 40 |     'django.contrib.staticfiles',
 41 |     'musics',
 42 |     'tailwind',
 43 |     'theme'
 44 | ]
 45 | 
 46 | MIDDLEWARE = [
 47 |     'django.middleware.security.SecurityMiddleware',
 48 |     'django.contrib.sessions.middleware.SessionMiddleware',
 49 |     'django.middleware.common.CommonMiddleware',
 50 |     'django.middleware.csrf.CsrfViewMiddleware',
 51 |     'django.contrib.auth.middleware.AuthenticationMiddleware',
 52 |     'django.contrib.messages.middleware.MessageMiddleware',
 53 |     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 54 | ]
 55 | 
 56 | ROOT_URLCONF = 'spotify_clone.urls'
 57 | 
 58 | TEMPLATES = [
 59 |     {
 60 |         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 61 |         'DIRS': [BASE_DIR/'templates'],
 62 |         'APP_DIRS': True,
 63 |         'OPTIONS': {
 64 |             'context_processors': [
 65 |                 'django.template.context_processors.debug',
 66 |                 'django.template.context_processors.request',
 67 |                 'django.contrib.auth.context_processors.auth',
 68 |                 'django.contrib.messages.context_processors.messages',
 69 |             ],
 70 |         },
 71 |     },
 72 | ]
 73 | 
 74 | WSGI_APPLICATION = 'spotify_clone.wsgi.application'
 75 | 
 76 | 
 77 | # Database
 78 | # https://docs.djangoproject.com/en/3.1/ref/settings/#databases
 79 | 
 80 | DATABASES = {
 81 |     'default': {
 82 |         'ENGINE': 'django.db.backends.sqlite3',
 83 |         'NAME': BASE_DIR / 'db.sqlite3',
 84 |     }
 85 | }
 86 | 
 87 | 
 88 | # Password validation
 89 | # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
 90 | 
 91 | AUTH_PASSWORD_VALIDATORS = [
 92 |     {
 93 |         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
 94 |     },
 95 |     {
 96 |         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
 97 |     },
 98 |     {
 99 |         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
100 |     },
101 |     {
102 |         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
103 |     },
104 | ]
105 | 
106 | 
107 | # Internationalization
108 | # https://docs.djangoproject.com/en/3.1/topics/i18n/
109 | 
110 | LANGUAGE_CODE = 'en-us'
111 | 
112 | TIME_ZONE = 'UTC'
113 | 
114 | USE_I18N = True
115 | 
116 | USE_L10N = True
117 | 
118 | USE_TZ = True
119 | 
120 | 
121 | # Static files (CSS, JavaScript, Images)
122 | # https://docs.djangoproject.com/en/3.1/howto/static-files/
123 | 
124 | STATIC_URL = '/static/'
125 | MEDIA_URL='/media/'
126 | 
127 | STATIC_ROOT= BASE_DIR/'static_root'
128 | MEDIA_ROOT= BASE_DIR/ 'media_root'
129 | 
130 | STATICFILES_DIRS=[
131 |     BASE_DIR/'static'
132 | ]
133 | 
134 | 
135 | # Tailwind
136 | TAILWIND_APP_NAME = 'theme'


--------------------------------------------------------------------------------
/spotify_clone/urls.py:
--------------------------------------------------------------------------------
 1 | 
 2 | from django.conf.urls import include
 3 | from django.contrib import admin
 4 | from django.urls import path
 5 | from django.conf import settings
 6 | from django.conf.urls.static import static
 7 | 
 8 | urlpatterns = [
 9 |     path('admin/', admin.site.urls),
10 |     path('',include('musics.urls',namespace='music'))
11 | ]
12 | 
13 | 
14 | if settings.DEBUG:
15 |     urlpatterns+=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
16 |     urlpatterns+=static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)


--------------------------------------------------------------------------------
/spotify_clone/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for spotify_clone project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'spotify_clone.settings')
15 | 
16 | application = get_wsgi_application()
17 | 


--------------------------------------------------------------------------------
/templates/addPage.html:
--------------------------------------------------------------------------------
 1 | {% extends 'base.html' %}
 2 | 
 3 | {% block content %}
 4 |     <h2 class="text-center text-green-700 text-2xl font-bold mt-8 mb-10">Add A new Song</h2>
 5 |     <form action="" method="post" class="w-10/12 md:w-1/2 mx-auto mb-8" enctype="multipart/form-data">
 6 |    
 7 |   {% csrf_token %}
 8 | 
 9 |  
10 |     <div class="my-4">
11 |         <label for="id_title" class="text-lg ">Album (Optional):</label>
12 |         <input type="text" name="album" maxlength="500" id="id_album" class="block w-full p-2 outline-none border-2 border-black rounded-lg">
13 |     </div>
14 |     <div class="my-4">
15 |         <label for="id_title" class="text-lg ">Title:</label>
16 |         <input type="text" name="title" maxlength="500" required="" id="id_title" class="block w-full p-2 outline-none border-2 border-black rounded-lg">
17 |     </div>
18 |     <div class="my-4">
19 |         <label for="id_title" class="text-lg ">Artist:</label>
20 |         <input type="text" name="artiste" maxlength="500" required="" id="id_artiste" class="block w-full p-2 outline-none border-2 border-black rounded-lg">
21 |     </div>
22 |     <div class=" overflow-hidden flex items-center justify-center flex-col my-4" >
23 |         <div class="details-audio text-black text-base">
24 | 
25 |         </div>
26 |         <div class="flex w-full items-center justify-center bg-grey-lighter">
27 |         <label class="w-64 flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer hover:bg-blue-500 hover:text-white">
28 |             <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
29 |                 <path d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z" />
30 |             </svg>
31 |             <span class="mt-2 text-base leading-normal">Select a Music File</span>
32 |             <input type='file' accept="audio/mp3" name="audio_file" class="hidden " onchange="showname('audio')" id="id_audio_file" required />
33 |         </label> 
34 |     </div>   
35 | </div>
36 | 
37 | <div class=" overflow-hidden flex items-center justify-center flex-col my-4" >
38 |     <div class="details-image text-black text-base">
39 |         
40 |     </div>
41 |     <div class="flex w-full items-center justify-center bg-grey-lighter">
42 |         <label class="w-64 flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer hover:bg-blue-500 hover:text-white">
43 |             <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
44 |                 <path d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z" />
45 |             </svg>
46 |             <span class="mt-2 text-base leading-normal">Select a Music Cover Image</span>
47 |             <input type='file' accept="image/*" name="cover_image" class="hidden cover_image" onchange="showname('image')" id="id_cover_image" required />
48 |             
49 |         </label> 
50 |         </div>      
51 |     </div>
52 |     <button class="bg-black p-4 text-white text-center ">
53 |         Submit
54 |     </button>
55 | </form> 
56 | 
57 | <script>
58 |     function showname (type) {
59 |     if(type=='audio'){
60 | 
61 |         var name = document.getElementById('id_audio_file'); 
62 |     }else{
63 |         var name = document.getElementById('id_cover_image'); 
64 | 
65 |     }
66 |     const file_name= name.files.item(0).name
67 |     document.querySelector(`.details-${type}`).textContent=`${file_name}`
68 |     };
69 | </script>
70 | {%endblock content%}


--------------------------------------------------------------------------------
/templates/home.html:
--------------------------------------------------------------------------------
  1 | {% extends 'base.html' %}
  2 | {% load music_tags %}
  3 | {% block Title %}
  4 | Spotify: The world of better music
  5 | {% endblock Title %}
  6 | 
  7 | 
  8 | {% block content %}
  9 | <div class=" flex items-center justify-center py-12 relative" style="background: #edf2f7; ">
 10 |     <div class="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
 11 | 
 12 |   <div class="relative max-w-xl w-full h-36 bg-white rounded-lg shadow-lg overflow-hidde mb-32">
 13 |     <div class="absolute inset-0 rounded-lg overflow-hidden bg-red-200">
 14 |       <img src="https://images.unsplash.com/photo-1499415479124-43c32433a620?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=889&q=80" alt="">
 15 |       <div class="absolute inset-0 backdrop backdrop-blur-10 bg-gradient-to-b from-transparent to-black">
 16 |         
 17 |       </div>
 18 |     </div>
 19 |     <div class="absolute flex space-x-6 transform translate-x-6 translate-y-8">
 20 |       <div class="w-36 h-36 rounded-lg shadow-lg overflow-hidden">
 21 |         <img class="music_img w-full object-cover" src="https://images.unsplash.com/photo-1488036106564-87ecb155bb15?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=375&q=80" alt="">
 22 |       </div>
 23 |       <div class="text-white pt-12">
 24 |         <h3 class="font-bold">Album</h3>
 25 |         <div class="text-sm opacity-60 album">Super Interpret</div>
 26 |         <div class="mt-8 text-gray-400">
 27 |           <div class="flex items-center space-x-2 text-xs">
 28 |             <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
 29 |             <span>Easy listening</span>
 30 |           </div>
 31 |         </div>
 32 |       </div>
 33 |     </div>
 34 |   </div>
 35 | 
 36 |   <div class="max-w-xl bg-white rounded-lg shadow-lg overflow-hidden">
 37 |     <div class="relative">
 38 |       <img
 39 |         src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
 40 |         class="object-cover">
 41 |       <div class="absolute p-4 inset-0 flex flex-col justify-end bg-gradient-to-b from-transparent to-gray-900 backdrop backdrop-blur-5 text-white">
 42 |         <h3 class="font-bold artist">Super Artist</h3>
 43 |         <span class="opacity-70 song-title">Albumtitle</span>
 44 |       </div>
 45 |     </div>
 46 |     <div>
 47 |       <div class="relative h-1 bg-gray-200 progress_container">
 48 |         <div class="absolute h-full w-2 progress bg-green-500 flex items-center justify-end">
 49 |           <div class="rounded-full w-3 h-3 bg-white shadow"></div>
 50 |         </div>
 51 |       </div>
 52 |     </div>
 53 |     <div class="flex justify-between text-xs font-semibold text-gray-500 px-4 py-2">
 54 |       <div class="currentDuration">
 55 |         0:00
 56 |       </div>
 57 |       <div class="flex space-x-3 p-2">
 58 |         <button class="focus:outline-none hover:bg-gray-200 prev">
 59 |           <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="19 20 9 12 19 4 19 20"></polygon><line x1="5" y1="19" x2="5" y2="5"></line></svg>
 60 |         </button>
 61 |         <button class="rounded-full w-8 h-8 flex hover:bg-gray-200 items-center justify-center pl-0.5 ring-2 ring-gray-100 focus:outline-none playing">
 62 |           <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
 63 |         </button>
 64 |         <button class="focus:outline-none hover:bg-gray-200 next">
 65 |           <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
 66 |         </button>
 67 |       </div>
 68 |       <div class="Duration">
 69 |         0:00
 70 |       </div>
 71 |     </div>
 72 |     <ul class="text-xs sm:text-base divide-y border-t cursor-default audio-tracks">
 73 |       {% for music in musics %}
 74 |       
 75 |       <li class="flex items-center space-x-3 hover:bg-gray-100">
 76 |         <button class="p-3 hover:bg-green-500 group focus:outline-none play_single">
 77 |           <svg class="w-4 h-4 group-hover:text-white play_svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
 78 |         </button>
 79 |         <div class="flex-1">
 80 |           {{music.artiste}} - {{music.title}}
 81 |         </div>
 82 |         <div class="text-xs text-gray-400">
 83 |           {{music.time_length | time_formater}}
 84 |         </div>
 85 |         <a href="media/{{music.audio_file}}" class="focus:outline-none pr-4 group">
 86 |           <svg class="w-4 h-4 group-hover:text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/></svg>
 87 |         </a>
 88 |       </li>
 89 |       {% endfor %}
 90 |       
 91 |     </ul>
 92 |   </div>
 93 | </div>
 94 | <a href="/add" class="w-20 h-20 bg-green-600 absolute rounded-full right-48 bottom-12 flex justify-center items-center cursor-pointer block">
 95 | 
 96 |  
 97 |     <svg xmlns='http://www.w3.org/2000/svg' class='ionicon h-10 w-10 text-gray-100 font-black' viewBox='0 0 512 512'><title>Add</title><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M256 112v288M400 256H112'/></svg>
 98 |   
 99 | </a>
100 | <audio class="audio-player" preload="metadata" autoplay="false" src="/media/musics/2017-04-14_-_Happy_Dreams_-_David_Fesliyan.mp3"></audio>
101 | </div>
102 | 
103 | {{musics|json_script:'musics'}}
104 | <script>
105 |   const player=document.querySelector('.audio-player')
106 |   const play=document.querySelector('.playing')
107 |   const prev=document.querySelector('.prev')
108 |   const next=document.querySelector('.next')
109 |   const currentTime=document.querySelector('.currentDuration')
110 |   const duration=document.querySelector('.Duration')
111 |   const progress=document.querySelector('.progress')
112 |   const progress_container=document.querySelector('.progress_container')
113 |   const audio_tracks=document.querySelector('.audio-tracks')
114 |   const song_title=document.querySelector('.song-title')
115 |   const artist=document.querySelector('.artist')
116 |   const album=document.querySelector('.album')
117 |   const music_img=document.querySelector('.music_img')
118 | 
119 |   // initilize music indexing
120 |   let musicIndex=0
121 |   
122 |   //get music document from backend 
123 |   const musics=JSON.parse(document.getElementById('musics').textContent)
124 |   
125 | 
126 | // functions
127 | // format time for music
128 | const formatTime=secs=>{
129 |   let min = Math.floor((secs % 3600) / 60); 
130 |   let sec = Math.floor(secs % 60)
131 |   if (sec<10){
132 |     sec=`0${sec}`
133 |   }
134 | 
135 |   return `${min}:${sec}`
136 | }
137 | 
138 | // loading a set detail of music in UI
139 | const setSRC=()=>{
140 | 
141 |   player.src=`/media/${musics[musicIndex].audio_file}`
142 |   song_title.textContent=musics[musicIndex].title 
143 |   artist.textContent=musics[musicIndex].artiste 
144 |   music_img.setAttribute('src',`media/${musics[musicIndex].cover_image}`)
145 |   if (musics[musicIndex].album_id !== null){
146 |     album.textContent=musics[musicIndex].album_id
147 |   }else{
148 |     album.textContent='Single'
149 | 
150 |   }
151 | 
152 | }
153 | 
154 | //determine player should play or not 
155 | const playOrPause=()=>{
156 |   if (player.paused){
157 |       player.play()
158 |       
159 |     }
160 | 
161 |     else{
162 |       player.pause()
163 | 
164 |     }
165 | }
166 | 
167 | // load first music
168 | setSRC()
169 | player.pause()
170 | 
171 | // eventlisteners
172 | // when play btn is clicked
173 | play.addEventListener("click",e=>{
174 | 
175 |   playOrPause()
176 | })
177 | 
178 | // update the progress bar
179 | player.addEventListener('timeupdate',e=>{
180 |   let secs=player.currentTime 
181 |   let total=player.duration
182 | 
183 |   currentTime.textContent=formatTime(player.currentTime)
184 | 
185 |   let progress_container_width=progress_container.offsetWidth
186 |   let progress_width=progress.offsetWidth
187 | 
188 |   let audio_played=(secs/total)*100
189 |   let newWidth = progress_container_width*(audio_played/100)
190 | 
191 |   progress.style.width=`${newWidth}px`
192 | 
193 | })
194 | 
195 | //when a progress bar is clicked to change music timer 
196 | progress_container.addEventListener('click',(e)=>{
197 |   const click_percentage=(e.offsetX/progress_container.offsetWidth)*100
198 |   // console.log(click_percentage)
199 |   const audio_played=(click_percentage/100)*player.duration
200 |   // console.log(audio_played)
201 |   let plaing
202 |   if (player.paused){
203 |       playing=false 
204 |   }
205 |   else{
206 |       playing=true  
207 |   }
208 |   player.currentTime=audio_played
209 |   
210 |   if(playing==false){
211 |     player.pause()
212 |   }
213 |   
214 | 
215 | })
216 | 
217 | // loads durations of music for current music to UI
218 | player.addEventListener('loadedmetadata',()=>{
219 |   duration.textContent=formatTime(player.duration)
220 |   // console.log(duration.textContent)
221 | })
222 | 
223 | // when an audio is chosen from the song tracks
224 | audio_tracks.addEventListener('click',e=>{
225 |   if((e.target.nodeName=='BUTTON' && e.target.classList.contains('play_single'))||
226 |   (e.target.nodeName=='svg'&&e.target.classList.contains('play_svg'))){
227 |     let parent_cont
228 |     
229 |     if (e.target.nodeName=='BUTTON'){
230 |       parent_cont=e.target.parentNode
231 |     }
232 |     else{
233 |         parent_cont=e.target.parentNode.parentNode
234 |     }
235 |     const newIndex=Array.from(audio_tracks.querySelectorAll('li')).indexOf(parent_cont)
236 |     
237 |     if (newIndex==musicIndex){
238 |       if(player.paused){
239 |         
240 |         player.play()
241 |       }else{
242 |         
243 |         player.pause()
244 |       }
245 |     }else{
246 | 
247 |       musicIndex=newIndex
248 |       setSRC()
249 |       player.play()
250 |     }
251 |   
252 |   }
253 | })
254 | 
255 | // when the prev btn is clicked
256 | prev.addEventListener('click',()=>{
257 |   musicIndex=musicIndex-1
258 |   if(musicIndex<0){
259 |     musicIndex=musics.length-1
260 |   }
261 | 
262 |   setSRC()
263 | 
264 |   playOrPause()
265 | })
266 | 
267 | // when the next btn is clicked
268 | next.addEventListener('click',()=>{
269 |   musicIndex=musicIndex+1
270 |   
271 |   if(musicIndex>musics.length-1){
272 |     musicIndex=0
273 |   }
274 | 
275 |   setSRC()
276 | 
277 |   playOrPause()
278 | 
279 | })
280 | 
281 | 
282 | </script>
283 | 
284 | {% endblock content %}
285 | 
286 | 


--------------------------------------------------------------------------------
/theme/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OtchereDev/django-spotify-clone/d42215f7bec8db3fbbee66624dd3289fc6c91ae2/theme/__init__.py


--------------------------------------------------------------------------------
/theme/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class ThemeConfig(AppConfig):
5 |     name = 'theme'
6 | 


--------------------------------------------------------------------------------
/theme/static_src/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "django_tailwind",
 3 |   "description": "",
 4 |   "scripts": {
 5 |     "start": "npm run dev",
 6 |     "build": "npm run build:clean && npm run build:sass && npm run build:postcss && npm run build:cleancss",
 7 |     "build:clean": "rimraf ../static/css",
 8 |     "build:sass": "node-sass --output-style compressed src/styles.scss ../static/css/styles.css",
 9 |     "build:postcss": "cross-env NODE_ENV=production postcss --config . --map false --output ../static/css/styles.css ../static/css/styles.css",
10 |     "build:cleancss": "cleancss -o ../static/css/styles.css ../static/css/styles.css",
11 |     "dev": "watch \"npm run dev:sass && npm run dev:postcss\" ./src",
12 |     "dev:sass": "node-sass --output-style expanded --source-map true src/styles.scss ../static/css/styles.css",
13 |     "dev:postcss": "postcss --config . --map true --output ../static/css/styles.css ../static/css/styles.css"
14 |   },
15 |   "keywords": [],
16 |   "author": "",
17 |   "license": "MIT",
18 |   "devDependencies": {
19 |     "autoprefixer": "^10.0.2",
20 |     "clean-css-cli": "^4.3.0",
21 |     "cross-env": "^7.0.3",
22 |     "node-sass": "^5.0.0",
23 |     "postcss": "^8.1.9",
24 |     "postcss-cli": "^8.3.0",
25 |     "postcss-scss": "^3.0.4",
26 |     "rimraf": "^3.0.2",
27 |     "tailwindcss": "^2.0.1",
28 |     "watch": "^1.0.2"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/theme/static_src/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/theme/static_src/src/styles.scss:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/theme/static_src/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | // This is a minimal config.
 2 | // If you need the full config, get it from here:
 3 | // https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
 4 | module.exports = {
 5 |     purge: [
 6 |         // Templates within theme app (e.g. base.html)
 7 |         '../templates/**/*.html',
 8 |         // Templates in other apps. Uncomment the following line if it matches
 9 |         // your project structure or change it to match.
10 |         // '../../templates/**/*.html',
11 |     ],
12 |     darkMode: false, // or 'media' or 'class'
13 |     theme: {
14 |         extend: {},
15 |     },
16 |     variants: {
17 |         extend: {},
18 |     },
19 |     plugins: [],
20 | }
21 | 


--------------------------------------------------------------------------------
/theme/templates/base.html:
--------------------------------------------------------------------------------
 1 | {% load static %}
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 
 5 | 	<head>
 6 | 		<meta charset="UTF-8">
 7 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
 9 | 		<title>{% block Title %}Spotify Clone{% endblock Title %}</title>
10 | 		<meta name="description" content="">
11 | 		<meta name="keywords" content="">
12 | 		<meta name="author" content="">
13 | 
14 | 		<link rel="stylesheet" href="{% static 'css/styles.css' %}">
15 | 	</head>
16 | 
17 | 	<body class='relative pt-8'>
18 | 		<nav class='p-4 bg-black bg-opacity-30 fixed top-0 left-0 w-full z-50'>
19 | 			<a href="{% url 'music:home_page' %}">
20 | 				<h2 class='text-white text-xl font-semibold'>
21 | 					<span class='text-green-800 font-black'>Django</span>-Spotify-Clone
22 | 				</h2>
23 | 			</a>
24 | 		</nav>
25 | 
26 | 		{% block content %}
27 | 		
28 | 		{% endblock content %}
29 | 
30 | 
31 | 	</body>
32 | 
33 | </html>
34 | 


--------------------------------------------------------------------------------