sort by channel working

apps/charts/views.py

@@ -9,8 +9,7 @@ def channel_videos_distribution(request, playlist_id):
     playlist_items = request.user.playlists.get(playlist_id=playlist_id).playlist_items.all()
 
     queryset = playlist_items.filter(Q(video__is_unavailable_on_yt=False) & Q(video__was_deleted_on_yt=False)).values(
-        'video__channel_name').annotate(channel_videos_count=Count('video_position')).order_by(
-        '-channel_videos_count')
+        'video__channel_name').annotate(channel_videos_count=Count('video_position'))
     for entry in queryset:
         labels.append(entry['video__channel_name'])
         data.append(entry['channel_videos_count'])

apps/main/migrations/0037_alter_video_num_of_accesses.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.3 on 2021-07-18 21:25
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0036_playlist_is_yt_mix'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='video',
+            name='num_of_accesses',
+            field=models.IntegerField(default=0),
+        ),
+    ]

apps/main/models.py

@@ -69,280 +69,6 @@ class PlaylistManager(models.Manager):
 
         return 0
 
-    def initPlaylist(self, user, pl_id):  # takes in playlist id and saves all of the vids in user's db
-
-        credentials = self.getCredentials(user)
-
-        with build('youtube', 'v3', credentials=credentials) as youtube:
-            pl_request = youtube.playlists().list(
-                part='contentDetails, snippet, id, player, status',
-                id=pl_id,  # get playlist details for this playlist id
-                maxResults=50
-            )
-
-            # execute the above request, and store the response
-            try:
-                pl_response = pl_request.execute()
-            except googleapiclient.errors.HttpError:
-                print("YouTube channel not found if mine=True")
-                print("YouTube playlist not found if id=playlist_id")
-                return -1
-
-            print("Playlist", pl_response)
-
-            if pl_response["pageInfo"]["totalResults"] == 0:
-                print("No playlists created yet on youtube.")
-                return -2
-
-            playlist_items = []
-
-            for item in pl_response["items"]:
-                playlist_items.append(item)
-
-            while True:
-                try:
-                    pl_request = youtube.playlists().list_next(pl_request, pl_response)
-                    pl_response = pl_request.execute()
-                    for item in pl_response["items"]:
-                        playlist_items.append(item)
-                except AttributeError:
-                    break
-
-        for item in playlist_items:
-            playlist_id = item["id"]
-
-            # check if this playlist already exists in user's untube database
-            if user.playlists.filter(playlist_id=playlist_id).exists():
-                playlist = user.playlists.get(playlist_id__exact=playlist_id)
-                print(f"PLAYLIST {playlist.name} ALREADY EXISTS IN DB")
-
-                # POSSIBLE CASES:
-                # 1. PLAYLIST HAS DUPLICATE VIDEOS, DELETED VIDS, UNAVAILABLE VIDS
-
-                # check if playlist count changed on youtube
-                if playlist.video_count != item['contentDetails']['itemCount']:
-                    playlist.has_playlist_changed = True
-                    playlist.save()
-
-                return -3
-            else:  # no such playlist in database
-                ### MAKE THE PLAYLIST AND LINK IT TO CURRENT_USER
-                playlist = Playlist(  # create the playlist and link it to current user
-                    playlist_id=playlist_id,
-                    name=item['snippet']['title'],
-                    description=item['snippet']['description'],
-                    published_at=item['snippet']['publishedAt'],
-                    thumbnail_url=getThumbnailURL(item['snippet']['thumbnails']),
-                    video_count=item['contentDetails']['itemCount'],
-                    is_private_on_yt=True if item['status']['privacyStatus'] == 'private' else False,
-                    playlist_yt_player_HTML=item['player']['embedHtml'],
-                    untube_user=user
-                )
-
-                playlist.save()
-
-                playlist = user.playlists.get(playlist_id=playlist_id)
-
-                ### GET ALL VIDEO IDS FROM THE PLAYLIST
-                video_ids = []  # stores list of all video ids for a given playlist
-                with build('youtube', 'v3', credentials=credentials) as youtube:
-                    pl_request = youtube.playlistItems().list(
-                        part='contentDetails, snippet, status',
-                        playlistId=playlist_id,  # get all playlist videos details for this playlist id
-                        maxResults=50
-                    )
-
-                    # execute the above request, and store the response
-                    pl_response = pl_request.execute()
-
-                    print("Playlist Items", pl_response)
-
-                    if playlist.channel_id == "":
-                        playlist.channel_id = item['snippet']['channelId']
-                        playlist.channel_name = item['snippet']['channelTitle']
-
-                        if user.profile.yt_channel_id.strip() != item['snippet']['channelId']:
-                            playlist.is_user_owned = False
-
-                        playlist.save()
-
-                    for item in pl_response['items']:
-                        video_id = item['contentDetails']['videoId']
-
-                        if not playlist.videos.filter(video_id=video_id).exists():  # video DNE
-                            if (item['snippet']['title'] == "Deleted video" and
-                                item['snippet']['description'] == "This video is unavailable.") or (
-                                    item['snippet']['title'] == "Private video" and item['snippet'][
-                                'description'] == "This video is private."):
-                                video = Video(
-                                    playlist_item_id=item["id"],
-                                    video_id=video_id,
-                                    name=item['snippet']['title'],
-                                    is_unavailable_on_yt=True,
-                                    video_position=item['snippet']['position'] + 1
-                                )
-                                video.save()
-                            else:
-                                video = Video(
-                                    playlist_item_id=item["id"],
-                                    video_id=video_id,
-                                    published_at=item['contentDetails']['videoPublishedAt'] if 'videoPublishedAt' in
-                                                                                               item[
-                                                                                                   'contentDetails'] else None,
-                                    name=item['snippet']['title'],
-                                    thumbnail_url=getThumbnailURL(item['snippet']['thumbnails']),
-                                    channel_id=item['snippet']['videoOwnerChannelId'],
-                                    channel_name=item['snippet']['videoOwnerChannelTitle'],
-                                    description=item['snippet']['description'],
-                                    video_position=item['snippet']['position'] + 1,
-                                )
-                                video.save()
-                            video_ids.append(video_id)
-                        else:  # video found in db
-                            video = playlist.videos.get(video_id=video_id)
-
-                            # check if the video became unavailable on youtube
-                            if (item['snippet']['title'] == "Deleted video" and
-                                item['snippet']['description'] == "This video is unavailable.") or (
-                                    item['snippet']['title'] == "Private video" and \
-                                    item['snippet']['description'] == "This video is private."):
-                                video.was_deleted_on_yt = True
-
-                            video.is_duplicate = True
-                            playlist.has_duplicate_videos = True
-                            video.save()
-
-                    while True:
-                        try:
-                            pl_request = youtube.playlistItems().list_next(pl_request, pl_response)
-                            pl_response = pl_request.execute()
-                            for item in pl_response['items']:
-                                video_id = item['contentDetails']['videoId']
-
-                                if not playlist.videos.filter(video_id=video_id).exists():  # video DNE
-                                    if (item['snippet']['title'] == "Deleted video" and
-                                        item['snippet']['description'] == "This video is unavailable.") or (
-                                            item['snippet']['title'] == "Private video" and \
-                                            item['snippet']['description'] == "This video is private."):
-
-                                        video = Video(
-                                            playlist_item_id=item["id"],
-                                            video_id=video_id,
-                                            published_at=item['contentDetails'][
-                                                'videoPublishedAt'] if 'videoPublishedAt' in item[
-                                                'contentDetails'] else None,
-                                            name=item['snippet']['title'],
-                                            is_unavailable_on_yt=True,
-                                            video_position=item['snippet']['position'] + 1
-                                        )
-                                        video.save()
-                                    else:
-                                        video = Video(
-                                            playlist_item_id=item["id"],
-                                            video_id=video_id,
-                                            published_at=item['contentDetails'][
-                                                'videoPublishedAt'] if 'videoPublishedAt' in item[
-                                                'contentDetails'] else None,
-                                            name=item['snippet']['title'],
-                                            thumbnail_url=getThumbnailURL(item['snippet']['thumbnails']),
-                                            channel_id=item['snippet']['videoOwnerChannelId'],
-                                            channel_name=item['snippet']['videoOwnerChannelTitle'],
-                                            video_position=item['snippet']['position'] + 1,
-                                        )
-                                        video.save()
-                                    video_ids.append(video_id)
-                                else:  # video found in db
-                                    video = playlist.videos.get(video_id=video_id)
-
-                                    # check if the video became unavailable on youtube
-                                    if (item['snippet']['title'] == "Deleted video" and
-                                        item['snippet']['description'] == "This video is unavailable.") or (
-                                            item['snippet']['title'] == "Private video" and \
-                                            item['snippet']['description'] == "This video is private."):
-                                        video.was_deleted_on_yt = True
-
-                                    video.is_duplicate = True
-                                    playlist.has_duplicate_videos = True
-                                    video.save()
-                        except AttributeError:
-                            break
-
-                    # API expects the video ids to be a string of comma seperated values, not a python list
-                    video_ids_strings = getVideoIdsStrings(video_ids)
-
-                    print(video_ids)
-                    print(video_ids_strings)
-
-                    # store duration of all the videos in the playlist
-                    vid_durations = []
-
-                    for video_ids_string in video_ids_strings:
-                        # query the videos resource using API with the string above
-                        vid_request = youtube.videos().list(
-                            part="contentDetails,player,snippet,statistics",  # get details of eac video
-                            id=video_ids_string,
-                            maxResults=50
-                        )
-
-                        vid_response = vid_request.execute()
-
-                        print("Videos()", pl_response)
-
-                        for item in vid_response['items']:
-                            duration = item['contentDetails']['duration']
-                            vid = playlist.videos.get(video_id=item['id'])
-
-                            if (item['snippet']['title'] == "Deleted video" and
-                                item['snippet'][
-                                    'description'] == "This video is unavailable.") or (
-                                    item['snippet']['title'] == "Private video" and item['snippet'][
-                                'description'] == "This video is private."):
-                                playlist.has_unavailable_videos = True
-                                vid_durations.append(duration)
-                                vid.video_details_modified = True
-                                vid.video_details_modified_at = datetime.datetime.now(tz=pytz.utc)
-                                vid.save(update_fields=['video_details_modified', 'video_details_modified_at',
-                                                        'was_deleted_on_yt', 'is_unavailable_on_yt'])
-                                continue
-
-                            vid.name = item['snippet']['title']
-                            vid.description = item['snippet']['description']
-                            vid.thumbnail_url = getThumbnailURL(item['snippet']['thumbnails'])
-                            vid.duration = duration.replace("PT", "")
-                            vid.duration_in_seconds = calculateDuration([duration])
-                            vid.has_cc = True if item['contentDetails']['caption'].lower() == 'true' else False
-                            vid.view_count = item['statistics']['viewCount'] if 'viewCount' in item[
-                                'statistics'] else -1
-                            vid.like_count = item['statistics']['likeCount'] if 'likeCount' in item[
-                                'statistics'] else -1
-                            vid.dislike_count = item['statistics']['dislikeCount'] if 'dislikeCount' in item[
-                                'statistics'] else -1
-                            vid.comment_count = item['statistics']['commentCount'] if 'commentCount' in item[
-                                'statistics'] else -1
-                            vid.yt_player_HTML = item['player']['embedHtml'] if 'embedHtml' in item['player'] else ''
-                            vid.save()
-
-                            vid_durations.append(duration)
-
-                playlist_duration_in_seconds = calculateDuration(vid_durations)
-
-                playlist.playlist_duration_in_seconds = playlist_duration_in_seconds
-                playlist.playlist_duration = getHumanizedTimeString(playlist_duration_in_seconds)
-
-                if len(video_ids) != len(vid_durations):  # that means some videos in the playlist are deleted
-                    playlist.has_unavailable_videos = True
-
-                playlist.is_in_db = True
-                # playlist.is_user_owned = False
-                playlist.save()
-
-        if pl_id is None:
-            user.profile.show_import_page = False
-            user.profile.import_in_progress = False
-            user.save()
-
-        return 0
-
     # Set pl_id as None to retrive all the playlists from authenticated user. Playlists already imported will be skipped by default.
     # Set pl_id = <valid playlist id>, to import that specific playlist into the user's account
     def initializePlaylist(self, user, pl_id=None):
@@ -423,7 +149,7 @@ class PlaylistManager(models.Manager):
                 # check if playlist count changed on youtube
                 if playlist.video_count != item['contentDetails']['itemCount']:
                     playlist.has_playlist_changed = True
-                    playlist.save()
+                    playlist.save(update_fields=['has_playlist_changed'])
 
                 if pl_id is not None:
                     result["status"] = -3
@@ -1327,8 +1053,7 @@ class Video(models.Model):
     is_pinned = models.BooleanField(default=False)
     is_marked_as_watched = models.BooleanField(default=False)  # mark video as watched
     is_favorite = models.BooleanField(default=False, blank=True)  # mark video as favorite
-    num_of_accesses = models.CharField(max_length=69,
-                                       default="0")  # tracks num of times this video was clicked on by user
+    num_of_accesses = models.IntegerField(default=0)  # tracks num of times this video was clicked on by user
     user_label = models.CharField(max_length=100, default="")  # custom user given name for this video
     user_notes = models.CharField(max_length=420, default="")  # user can take notes on the video and save them
 

apps/main/templates/home.html

@@ -132,7 +132,7 @@
         <div class="row" ><!--data-masonry='{"percentPosition": true }'-->
             {% for playlist in user_playlists|slice:"0:3" %}
                 <div class="col-sm-6 col-lg-4 mb-4">
-                    <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="">
+                    <div class="card card-cover h-100 overflow-hidden text-white gradient-bg rounded-5 shadow-lg" style="">
                         <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
                             <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"><a href="{% url 'playlist' playlist.playlist_id %}" class="stretched-link" style="text-decoration: none; color: #fafafa">{{ playlist.name }}</a> </h2>
                             <ul class="d-flex list-unstyled mt-auto">
@@ -242,150 +242,6 @@
             </div>
         </div>
 
-
-
-        <div class="container" id="custom-cards">
-            <h2 class="pb-2 border-bottom">Custom cards</h2>
-
-            <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
-                {% for playlist in user_playlists|slice:"0:3" %}
-
-                    <div class="col">
-                        <div class="card card-cover h-100 overflow-hidden text-dark bg-dark rounded-5 shadow-lg" style="background-image: url('{% if playlist.videos.count != 0 %}{{ playlist.thumbnail_url }}{% endif %}'); background-position: center">
-
-                            <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
-                                <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold"><a href="{% url 'playlist' playlist.playlist_id %}" class="stretched-link" style="text-decoration: none; color: #100f0f">{{ playlist.name }}</a> </h2>
-                                <ul class="d-flex list-unstyled mt-auto">
-                                    <li class="me-auto">
-                                        <img src="{{ playlist.thumbnail_url }}" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
-                                    </li>
-
-                                    <li class="d-flex align-items-center me-3 text-dark">
-                                        <small>by {{ playlist.channel_name }}</small>
-                                    </li>
-                                    <li class="d-flex align-items-center text-dark">
-                                        <i class="fas fa-eye me-1"></i>
-                                        <small>{{ playlist.num_of_accesses }}</small>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-        </div>
-
-
-        <div class="row text-dark mt-0 align-items-center">
-            <div class="col">
-                <div class="row">
-                    <div class="col">
-                        <div class="card" style="background: linear-gradient(-45deg, #aaae6b, #7b8eab, #8abc97, #e666f5); background-size: 400% 400%; animation: gradient 7s ease infinite;">
-                            <a href="#" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
-                                <div class="card-body">
-                                    <div class="d-flex justify-content-center h1">
-                                        <i class="fas fa-map-pin" style="color:#c22929"></i>
-                                    </div>
-                                    <div class="d-flex justify-content-center h1">
-                                        YOUR
-                                    </div>
-                                    <div class="d-flex justify-content-center h1">
-                                        PINS
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="col">
-                        <div class="card" style="background: linear-gradient(-45deg, #0645a4, #2480cd, #84bcf3, #b7d6f7); background-size: 400% 400%; animation: gradient 7s ease infinite;">
-                            <a href="#" class="list-group-item list-group-item-action bg-transparent" aria-current="true">
-                                <div class="card-body">
-                                    <div class="d-flex justify-content-center h1">
-                                        <i class="fas fa-heart" style="color: indianred"></i>
-                                    </div>
-                                    <div class="d-flex justify-content-center h1">
-                                        LIKED
-                                    </div>
-                                    <div class="d-flex justify-content-center h1">
-                                        VIDEOS
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <!-- Implement later
-                    <div class="row mt-3">
-                        <div class="col">
-
-                        </div>
-                        <div class="col-6">
-                        <div class="card">
-                            <a style="background: linear-gradient(-45deg, #e2b968, #68af5b, #8a97bc, #d69ab2); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
-                                <div class="card-body">
-                                    <div class="d-flex justify-content-center h1">
-                                        <i class="fas fa-history"></i>
-                                    </div>
-                                    <div class="d-flex justify-content-center h1">
-                                        YOUR
-                                    </div>
-                                    <div class="d-flex justify-content-center h1">
-                                        ACTIVITY
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                        </div>
-                        <div class="col">
-
-                        </div>
-                    </div>
-                    -->
-            </div>
-            <div class="col-8">
-                <!--
-                  <div class="card bg-transparent text-black border border-5 rounded-3 border-success p-3">
-                        <div class="card-body">
-                              <h3><span style="border-bottom: 3px #e24949 dashed;">Most viewed playlists</span> <a href="{% url 'all_playlists' 'all' %}" class="pt-1"><i class="fas fa-binoculars"></i> </a></h3>
-                                {% if user_playlists %}
-                                <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
-                                    {% for playlist in user_playlists|slice:"0:3" %}
-                                    <div class="col">
-                                        <div class="card overflow-auto" style="background-color: #4790c7;">
-                                            <a href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
-                                                <div class="card-body">
-                                            <h5 class="card-title">
-                                               #{{ forloop.counter }} <br><br>{{ playlist.name }}
-                                                {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
-                                                {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
-                                            </h5>
-                                            <small>
-                                                <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
-                                                <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
-                                                <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
-
-                                            </small>
-                                            </div>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    {% endfor %}
-
-                                </div>
-
-                                {% else %}
-                                    <br>
-                                <h5>Nothing to see here... yet.</h5>
-                                {% endif %}
-
-
-                        </div>
-                      </div>
-                -->
-
-            </div>
-        </div>
-
         <br>
 
         <div class="row text-dark mt-0 d-flex justify-content-evenly">

apps/main/templates/intercooler/videos.html

@@ -5,7 +5,7 @@
 <div class="list-group" id="video-checkboxes">
     {% if playlist_items %}
       {% for playlist_item in playlist_items|slice:"0:50" %}
-                <li {% if forloop.last and playlist_items.count > 50 %}hx-get="{% url 'load_more_videos' playlist.playlist_id order_by|default:"all" page|default:"1" %}"
+                <li id="{{ playlist_item.playlist_item_id }}" onclick="selectVideo(this);"  {% if forloop.last and playlist_items.count > 50 %}hx-get="{% url 'load_more_videos' playlist.playlist_id order_by|default:"all" page|default:"1" %}"
     hx-trigger="revealed"
     hx-swap="afterend" hx-indicator="#load-more-videos-spinner"{% endif %} class="list-group-item d-flex justify-content-between align-items-center bg-transparent" style="background-color: #40B3A2">
 
@@ -13,13 +13,13 @@
 
                 <div class="d-flex justify-content-between align-items-center">
                     <div>
-                        <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ playlist_item.video.video_id }}" name="video-id">
+                        <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ playlist_item.video.video_id }}" id="video-{{ playlist_item.playlist_item_id }}" name="video-id">
                     </div>
                       <div class="ms-4" style="max-width: 115px; max-height: 100px;">
                           <img src="https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg" class="img-fluid" alt="">
                       </div>
                         <div class="ms-4">
-                            {{ playlist_item.video_position }}.
+                            {{ playlist_item.video_position|add:"1" }}.
                             <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                  {{ playlist_item.video.name }}
                             </a>
@@ -30,7 +30,7 @@
 
                 <div class="d-flex justify-content-between align-items-center" >
                     <div>
-                        <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ playlist_item.video.video_id }}" name="video-id">
+                        <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ playlist_item.video.video_id }}" id="video-{{ playlist_item.playlist_item_id }}" name="video-id">
                     </div>
                       <div class="ms-4" style="max-width: 115px; max-height: 100px;">
                           <img src="{% if playlist_item.video.thumbnail_url %}{{ playlist_item.video.thumbnail_url }}{% else %}https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg{% endif %}" class="img-fluid" alt="">
@@ -38,7 +38,7 @@
                         <div class="ms-4">
 
                         {% if playlist_item.video.is_unavailable_on_yt or playlist_item.video.was_deleted_on_yt %}
-                            {{ playlist_item.video_position }}.
+                            {{ playlist_item.video_position|add:"1" }}.
                             <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                 {{ playlist_item.video.name|truncatewords:"16" }}
                             </a>
@@ -47,7 +47,7 @@
                             {% if playlist_item.video.video_details_modified %}<span class="badge bg-danger">{% if playlist_item.video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}ADDED{% endif %} {{ playlist_item.video.updated_at|naturaltime|upper }}</span>{% endif %}
                             <br><br>
                         {% else %}
-                            {{ playlist_item.video_position }}.
+                            {{ playlist_item.video_position|add:"1" }}.
                             <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                 {{ playlist_item.video.name|truncatewords:"16" }}
                             </a> by {{ playlist_item.video.channel_name }} <br>

apps/main/templates/view_playlist.html

@@ -30,7 +30,7 @@
             <div class="card text-white" style="max-width: 100%; background-color: #1A4464;">
                 <div class="row g-0">
                     <div class="col-md-4 p-3">
-                        <img  class="img-fluid rounded-3" src="{{ playlist.thumbnail_url }}" style="max-width:100%; height: auto;   object-fit: cover;">
+                        <img  class="img-fluid rounded-3" src="{{ playlist_items.0.video.thumbnail_url }}" style="max-width:100%; height: auto;   object-fit: cover;">
                     </div>
                     <div class="col-md-8">
                         <div class="card-body">
@@ -62,7 +62,7 @@
                             <h6>by {{ playlist.channel_name }}</h6>
                             <p class="card-text">
                                 {% if playlist.description %}
-                                    <h5 class="overflow-auto" {% if playlist.description|length > 750 %} style="height: 150px;"{% endif %}>
+                                    <h5 class="overflow-auto" style="max-height: 350px;">
                                         {{ playlist.description|linebreaksbr|urlize  }}
                                     </h5>
 
@@ -160,7 +160,7 @@
                                 </div>
                             </h6>
 
-                            <p class="card-text"><small class="text-white-50">Last updated {{ playlist.updated_at|naturalday }}</small></p>
+                            <p class="card-text text-white-50"><small>Last updated {{ playlist.updated_at|naturalday }}</small> &bullet; <small>{{ playlist.num_of_accesses }} clicks </small></p>
                         </div>
                     </div>
                 </div>
@@ -216,7 +216,7 @@
                                     </button>
                                     <ul class="dropdown-menu">
                                         {% for channel in channels.1 %}
-                                        <li><button class="dropdown-item" hx-get="" hx-trigger="click" hx-target="#videos-div">{{ channel }}</button></li>
+                                        <li><a class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'channel' %}" hx-vals='{"channel-name": "{{ channel }}"}' hx-trigger="click" hx-target="#videos-div">{{ channel }}</a></li>
                                         {% endfor %}
                                     </ul>
                                     {% endwith %}

apps/main/templates/view_video.html

@@ -44,7 +44,7 @@
                             <h6>by {{ video.channel_name }}</h6>
                             <p class="card-text">
                                 {% if video.description %}
-                                    <h5 class="overflow-auto" {% if video.description|length > 750 %} style="height: 250px;"{% endif %}>
+                                    <h5 class="overflow-auto" style="max-height: 350px;">
                                         {{ video.description|linebreaksbr|urlize  }}
                                     </h5>
 
@@ -54,21 +54,20 @@
                             </p>
 
 
-                            <h6 class="h6 text-uppercase overflow-auto text-black-50">
-                                <span class="badge bg-secondary">{{ video.duration }}</span>
-                                {% if video.has_cc %}<span class="badge bg-danger">CC</span>{% endif %}
-                                {% if video.published_at %}<span class="badge bg-secondary">Video uploaded on {{ video.published_at }}</span>{% endif %}
-                                <span class="badge bg-primary text-white"><i class="fas fa-eye"></i> {% if video.view_count == -1 %}HIDDEN{% else %}{{ video.view_count|intcomma }}{% endif %}</span>
-                                <span class="badge bg-warning text-black-50"><i class="fas fa-thumbs-up"></i> {% if video.like_count == -1 %}HIDDEN{% else %}{{ video.like_count|intcomma }}{% endif %}</span>
-                                <span class="badge bg-warning text-black-50"><i class="fas fa-thumbs-down"></i> {% if video.dislike_count == -1 %}HIDDEN{% else %}{{ video.dislike_count|intcomma }}{% endif %}</span>
-                                <span class="badge bg-info text-black-50"><i class="fas fa-comments"></i> {% if video.comment_count == -1 %}HIDDEN{% else %}{{ video.comment_count|intcomma }}{% endif %} </span>
-                                {% if video.is_unavailable_on_yt or video.was_deleted_on_yt %}<span class="badge bg-light text-black-50">UNAVAILABLE</span>{% endif %}
-                                <span class="badge bg-light text-black-50"><a href="#found-in" style="text-decoration: none; color: grey"> Found in {{ video.playlistitem_set.count }} playlists</a></span>
+                            <h6 class="h5 text-uppercase overflow-auto text-black-50">
+                                <span class="badge bg-success mb-1">{{ video.duration }}</span>
+                                {% if video.has_cc %}<span class="badge bg-danger mb-1">CC</span>{% endif %}
+                                {% if video.published_at %}<span class="badge bg-secondary mb-1">Video uploaded on {{ video.published_at }}</span>{% endif %}
+                                <span class="badge bg-primary text-white mb-1"><i class="fas fa-eye"></i> {% if video.view_count == -1 %}HIDDEN{% else %}{{ video.view_count|intcomma }}{% endif %}</span>
+                                <span class="badge bg-warning text-black-50 mb-1"><i class="fas fa-thumbs-up"></i> {% if video.like_count == -1 %}HIDDEN{% else %}{{ video.like_count|intcomma }}{% endif %}</span>
+                                <span class="badge bg-warning text-black-50 mb-1"><i class="fas fa-thumbs-down"></i> {% if video.dislike_count == -1 %}HIDDEN{% else %}{{ video.dislike_count|intcomma }}{% endif %}</span>
+                                <span class="badge bg-info text-black-50 mb-1"><i class="fas fa-comments"></i> {% if video.comment_count == -1 %}HIDDEN{% else %}{{ video.comment_count|intcomma }}{% endif %} </span>
+                                {% if video.is_unavailable_on_yt or video.was_deleted_on_yt %}<span class="badge bg-light text-black-50 mb-1">UNAVAILABLE</span>{% endif %}
+                                <span class="badge bg-light text-black-50 mb-1"><a href="#found-in" style="text-decoration: none; color: grey"> Found in {{ video.playlistitem_set.count }} playlists</a></span>
 
 
                             </h6>
-                            <p class="card-text"><small class="text-white-50">Last updated {{ video.updated_at|naturaltime }}</small></p>
-                        </div>
+                            <p class="card-text text-white-50"><small>Last updated {{ video.video_details_modified_at|naturalday }}</small> &bullet; <small>{{ video.num_of_accesses }} clicks </small></p>                        </div>
                     </div>
                 </div>
             </div>

apps/main/views.py

@@ -95,10 +95,14 @@ def home(request):
 def view_video(request, video_id):
     if request.user.videos.filter(video_id=video_id).exists():
         video = request.user.videos.get(video_id=video_id)
+
         if video.is_unavailable_on_yt or video.was_deleted_on_yt:
             messages.error(request, "Video went private/deleted on YouTube!")
             return redirect('home')
 
+        video.num_of_accesses += 1
+        video.save(update_fields=['num_of_accesses'])
+
         return render(request, 'view_video.html', {"video": video})
     else:
         messages.error(request, "No such video in your UnTube collection!")
@@ -297,20 +301,20 @@ def order_playlist_by(request, playlist_id, order_by):
         display_text = "No favorites yet!"
     elif order_by == "popularity":
         videos_details = "Sorted by Popularity"
-        videos = playlist.videos.order_by("-like_count")
+        playlist_items = playlist.playlist_items.select_related('video').order_by("-video__like_count")
     elif order_by == "date-published":
         videos_details = "Sorted by Date Published"
-        videos = playlist.videos.order_by("-published_at")
+        playlist_items = playlist.playlist_items.select_related('video').order_by("-published_at")
     elif order_by == "views":
         videos_details = "Sorted by View Count"
-        videos = playlist.videos.order_by("-view_count")
+        playlist_items = playlist.playlist_items.select_related('video').order_by("-video__view_count")
     elif order_by == "has-cc":
         videos_details = "Filtered by Has CC"
-        videos = playlist.videos.filter(has_cc=True).order_by("video_position")
+        playlist_items = playlist.playlist_items.select_related('video').filter(video__has_cc=True).order_by("video_position")
         display_text = "No videos in this playlist have CC :("
     elif order_by == "duration":
         videos_details = "Sorted by Video Duration"
-        videos = playlist.videos.order_by("-duration_in_seconds")
+        playlist_items = playlist.playlist_items.select_related('video').order_by("-video__duration_in_seconds")
     elif order_by == 'new-updates':
         playlist_items = []
         videos_details = "Sorted by New Updates"
@@ -330,11 +334,15 @@ def order_playlist_by(request, playlist_id, order_by):
             else:
                 playlist_items = recently_updated_videos.order_by("video_position")
     elif order_by == 'unavailable-videos':
-        videos = playlist.videos.filter(Q(is_unavailable_on_yt=True) & Q(was_deleted_on_yt=True))
+        playlist_items = playlist.playlist_items.select_related('video').filter(Q(video__is_unavailable_on_yt=True) & Q(video__was_deleted_on_yt=True))
         videos_details = "Sorted by Unavailable Videos"
         display_text = "None of the videos in this playlist have gone unavailable... yet."
+    elif order_by == 'channel':
+        channel_name = request.GET["channel-name"]
+        playlist_items = playlist.playlist_items.select_related('video').filter(video__channel_name=channel_name).order_by("video_position")
+        videos_details = f"Sorted by Channel '{channel_name}'"
     else:
-        return redirect('home')
+        return HttpResponse("Something went wrong :(")
 
     return HttpResponse(loader.get_template("intercooler/videos.html").render({"playlist": playlist,
                                                                                "playlist_items": playlist_items,
@@ -710,15 +718,15 @@ def load_more_videos(request, playlist_id, order_by, page):
     elif order_by == "favorites":
         playlist_items = playlist.playlist_items.select_related('video').filter(video__is_favorite=True).order_by("video_position")
     elif order_by == "popularity":
-        videos = playlist.videos.order_by("-like_count")
+        playlist_items = playlist.playlist_items.select_related('video').order_by("-video__like_count")
     elif order_by == "date-published":
-        videos = playlist.videos.order_by("-published_at")
+        playlist_items = playlist.playlist_items.select_related('video').order_by("-published_at")
     elif order_by == "views":
-        videos = playlist.videos.order_by("-view_count")
+        playlist_items = playlist.playlist_items.select_related('video').order_by("-video__view_count")
     elif order_by == "has-cc":
-        videos = playlist.videos.filter(has_cc=True).order_by("video_position")
+        playlist_items = playlist.playlist_items.select_related('video').filter(video__has_cc=True).order_by("video_position")
     elif order_by == "duration":
-        videos = playlist.videos.order_by("-duration_in_seconds")
+        playlist_items = playlist.playlist_items.select_related('video').order_by("-video__duration_in_seconds")
     elif order_by == 'new-updates':
         playlist_items = []
         if playlist.has_new_updates:
@@ -736,7 +744,11 @@ def load_more_videos(request, playlist_id, order_by, page):
             else:
                 playlist_items = recently_updated_videos.order_by("video_position")
     elif order_by == 'unavailable-videos':
-        videos = playlist.videos.filter(Q(is_unavailable_on_yt=True) & Q(was_deleted_on_yt=True))
+        playlist_items = playlist.playlist_items.select_related('video').filter(Q(video__is_unavailable_on_yt=True) & Q(video__was_deleted_on_yt=True))
+    elif order_by == 'channel':
+        channel_name = request.GET["channel-name"]
+        playlist_items = playlist.playlist_items.select_related('video').filter(
+            video__channel_name=channel_name).order_by("video_position")
 
     return HttpResponse(loader.get_template("intercooler/videos.html")
         .render(

templates/base.html

@@ -27,6 +27,12 @@
                 //animation: gradient 10s ease infinite;
                 }
 
+            .gradient-bg {
+                background: linear-gradient(-45deg, #e2b968, #68af5b, #8a97bc, #d69ab2);
+                background-size: 400% 400%;
+                animation: gradient 10s ease infinite;
+            }
+
             @keyframes gradient {
                 0% {
                     background-position: 0% 50%;