feat: Youtube Viewer and Date Updation

courses/models.py

@@ -21,7 +21,7 @@ class BaseModel(models.Model):
 
     class Meta:
         abstract = True
-        ordering = ['-updated_at']
+        ordering = ["-updated_at"]
 
 
 class PublishedManager(models.Manager):
@@ -38,11 +38,13 @@ class SEOModel(BaseModel):
     description = models.TextField(blank=True)
     meta_description = models.CharField(max_length=160, blank=True)
     keywords = models.CharField(max_length=200, blank=True)
-    og_image = models.FileField(storage=PublicMediaStorage(), upload_to="og-image/", blank=True, null=True)
+    og_image = models.FileField(
+        storage=PublicMediaStorage(), upload_to="og-image/", blank=True, null=True
+    )
 
     class Meta:
         abstract = True
-        ordering =['-updated_at']
+        ordering = ["-updated_at"]
 
     def generate_og_image_svg(self) -> str:
         """Generate the SVG for the Open Graph image as a string"""
@@ -59,20 +61,23 @@ def write_og_image(self) -> None:
         if self.status == "published":
             # Delete previous image
             self.delete_previous_og_image()
-            
+
             # Generate new image
             png_filelike = io.BytesIO()
             cairosvg.svg2png(
-                bytestring=self.generate_og_image_svg().encode(), write_to=png_filelike, unsafe=True
+                bytestring=self.generate_og_image_svg().encode(),
+                write_to=png_filelike,
+                unsafe=True,
             )
             png_filelike.seek(0)
-            
+
             # Versioned filename
             version = int(datetime.timestamp(datetime.now()))
             filename = f"{self.slug}_v{version}.png"
-            
+
             self.og_image.save(filename, png_filelike, save=False)
 
+
 class Year(BaseModel):
     year = models.IntegerField()
     slug = models.SlugField(unique=True, blank=True)
@@ -161,8 +166,11 @@ def __str__(self):
         return self.name
 
     def get_all_available_resource_types(self):
-        return self.resources.order_by("resource_type").values_list("resource_type", flat=True).distinct()
-
+        return (
+            self.resources.order_by("resource_type")
+            .values_list("resource_type", flat=True)
+            .distinct()
+        )
 
     def update_last_resource_updated(self):
         last_updated = self.resources.aggregate(Max("updated_at"))["updated_at__max"]
@@ -177,15 +185,15 @@ def get_last_updated_resource(self):
             diff = now - last_updated
 
             if diff < timedelta(hours=1):
-                return {"status": "updated recently", "exact_time": last_updated}
+                return {"status": "recently", "exact_time": last_updated}
             elif diff < timedelta(days=1):
-                return {"status": "updated today", "exact_time": last_updated}
+                return {"status": "today", "exact_time": last_updated}
             elif diff < timedelta(days=7):
-                return {"status": "updated this week", "exact_time": last_updated}
+                return {"status": "week ago", "exact_time": last_updated}
             elif diff < timedelta(days=30):
-                return {"status": "updated this month", "exact_time": last_updated}
+                return {"status": "month ago", "exact_time": last_updated}
             elif diff < timedelta(days=365):
-                return {"status": "updated this year", "exact_time": last_updated}
+                return {"status": "this year", "exact_time": last_updated}
             else:
                 return {
                     "status": f"updated on {last_updated.strftime('%b %Y')}",
@@ -226,7 +234,7 @@ class Resource(SEOModel):
     resource_type = models.CharField(
         max_length=20, choices=RESOURCE_TYPE_CHOICES, db_index=True
     )
-    file = models.FileField(storage=PrivateMediaStorage, upload_to="resources/")
+    file = models.FileField(storage=PrivateMediaStorage, upload_to="resources/",blank=True,null=True)
 
     privacy = MultiSelectField(choices=RESOURCE_PRIVACY_CHOICES, default=["view"])
 
@@ -268,15 +276,15 @@ def get_last_updated_at(self):
             now = timezone.now().astimezone()
             diff = now - last_updated
             if diff < timedelta(hours=1):
-                return {"status": "updated recently", "exact_time": last_updated}
+                return {"status": "recently", "exact_time": last_updated}
             elif diff < timedelta(days=1):
-                return {"status": "updated today", "exact_time": last_updated}
+                return {"status": "today", "exact_time": last_updated}
             elif diff < timedelta(days=7):
-                return {"status": "updated this week", "exact_time": last_updated}
+                return {"status": "week ago", "exact_time": last_updated}
             elif diff < timedelta(days=30):
-                return {"status": "updated this month", "exact_time": last_updated}
+                return {"status": "month ago", "exact_time": last_updated}
             elif diff < timedelta(days=365):
-                return {"status": "updated this year", "exact_time": last_updated}
+                return {"status": "this year", "exact_time": last_updated}
             else:
                 return {
                     "status": f"updated on {last_updated.strftime('%b %Y')}",

courses/views.py

@@ -6,6 +6,7 @@
 from django.urls import reverse
 from django.db.models import Q
 from django.templatetags.static import static
+from urllib.parse import urlparse, parse_qs
 
 # default_og_image_url = static('images/default-og-image.jpg')
 
@@ -235,9 +236,27 @@ def resource_view(
             og_image=None,
             site_name="Gyan Aangan",
         )
+    video_id = None
+    if resource.type == "video":
+        def extract_video_id(url):
+            parsed_url = urlparse(url)
+            query_params = parse_qs(parsed_url.query)
+            video_id = query_params.get('v')
+            if video_id:
+                return video_id[0]
+            else:
+                return None
+
+        video_id = extract_video_id(resource.embed_link)
+        if video_id:
+            # Do something with the video ID
+            print(f"Video ID: {video_id}")
+        else:
+            print("Invalid YouTube watch URL")
 
     context = {
         "resource": resource,
+        "video_id":video_id if video_id else None,
         "title": seo_detail.title,
         "meta_description": seo_detail.meta_description,
         "og_image": (

templates/courses/components/course_card.html

@@ -21,7 +21,7 @@ <h2 class="text-xl font-bold text-white mb-4">
         </div>
     </div>
     <div class="-z-10 transition-all duration-300 absolute h-full inset-y-0 right-0 md:w-[106px] flex items-center w-[106px]">
-        <div class="md:h-[135%] bg-gray-700 scale-100 h-[135%] aspect-1 flex items-center rounded-full transition-transform">
+        <div class="md:h-[135%] bg-gray-700 scale-100 h-[135%] aspect-square flex items-center rounded-full transition-transform">
         </div>
     </div>
 </div>

templates/courses/components/resource/resource_card.html

@@ -34,7 +34,7 @@ <h1 class="font-semibold text-white hover:text-blue-400">
     </div>
     <div class="flex flex-wrap items-center text-sm justify-between mt-2">
         <div class="flex gap-2 text-gray-400 font-bold">
-            <time class="rounded-full">{{ item.get_last_updated_at.status }}</time>
+            <time class="rounded-full">{{ item.get_last_updated_at.status }}</time>·
             <p>{{ item.educational_year.name }}</p>
         </div>
         <div class="flex items-center gap-6">
@@ -141,7 +141,7 @@ <h1 class="font-semibold text-white hover:text-blue-400">
         </div>
     </div>
     <div class="transition-all -z-10 duration-300 absolute h-full inset-y-0 right-0 md:w-[106px] flex items-center w-[106px]">
-        <div class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-1 flex items-center rounded-full transition-transform">
+        <div class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-square flex items-center rounded-full transition-transform">
         </div>
     </div>
 </div>

templates/courses/components/special_page_card.html

@@ -32,7 +32,7 @@ <h2 class="text-xl font-bold text-white mb-4">
         </div>
     </div>
     <div class="transition-all duration-300 absolute h-full inset-y-0 right-0 md:w-[106px] flex items-center w-[106px] -z-10">
-        <div class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-1 flex items-center rounded-full transition-transform">
+        <div class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-square flex items-center rounded-full transition-transform">
         </div>
     </div>
 </div>

templates/courses/components/stream_card.html

@@ -29,7 +29,7 @@ <h2 class="text-2xl font-bold text-white mb-4">
     </div>
     <div class="transition-all duration-300 absolute h-full inset-y-0 right-0 md:w-[106px] flex items-center w-[106px]">
         <div
-            class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-1 flex items-center rounded-full transition-transform">
+            class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-square flex items-center rounded-full transition-transform">
         </div>
     </div>
 </div>

templates/courses/components/subject_card.html

@@ -45,7 +45,7 @@ <h2 class="block w-full text-xl font-bold flex-grow">
     <div
         class="-z-10 transition-all duration-300 absolute h-full inset-y-0 right-0 md:w-[106px] flex items-center w-[106px]">
         <div
-            class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-1 flex items-center rounded-full transition-transform">
+            class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-square flex items-center rounded-full transition-transform">
         </div>
     </div>
 </div>

templates/courses/components/subject_card_hero.html

@@ -81,7 +81,7 @@ <h3 class="font-semibold text-white">Description</h3>
     <div
         class="-z-10 transition-all duration-300 absolute h-full inset-y-0 right-0 md:w-[106px] flex items-center w-[106px]">
         <div
-            class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-1 flex items-center rounded-full transition-transform">
+            class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-square flex items-center rounded-full transition-transform">
         </div>
     </div>
 

templates/courses/components/year_card.html

@@ -19,7 +19,7 @@ <h2 class="text-2xl font-bold text-white mb-4">
         </div>
     </div>
     <div class="transition-all duration-300 absolute h-full inset-y-0 right-0 md:w-[106px] flex items-center w-[106px]">
-        <div class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-1 flex items-center rounded-full transition-transform">
+        <div class="md:h-[135%] bg-gray-700 scale-100 group-hover:scale-[400%] h-[135%] aspect-square flex items-center rounded-full transition-transform">
         </div>
     </div>
 </div>

templates/courses/pdf_viewer.html

@@ -1,12 +1,12 @@
 {% extends 'base.html' %}
-{%load static%}
-{% block title %}{{resource.title}}Resource View{% endblock %}
-
+{% load static %}
+{% block title %}{{ resource.title }}Resource View{% endblock %}
 {% block meta %}
-<meta name="description" content="Welcome to our education platform. Browse courses, subjects, and resources.">
-<meta name="keywords" content="education, courses, subjects, resources">
-
-<script>
+    <meta name="description"
+          content="Welcome to our education platform. Browse courses, subjects, and resources.">
+    <meta name="keywords" content="education, courses, subjects, resources">
+    {% if resource.type  != "video" %}
+        <script>
     window.viewPdf = function (_this) {
         let element = document.getElementById(_this.dataset.pdf)
         pdfName = (element.id.replace(/ /g, '%20'));
@@ -30,49 +30,61 @@
         }
     }
 
-</script>
+        </script>
+    {% endif %}
 {% endblock %}
-
 {% block content %}
-
-    <main class="min-h-[100vh]" style="background-image: url('{% static 'images/hero-pattern-dark.svg' %}');">
-        <div
-            class="flex min-h-[80vh] flex-col justify-center h-full gap-4 px-4 mx-auto max-w-screen-xl lg:py-16 z-10 relative">
+    <main class="min-h-[100vh]"
+          style="background-image: url('{% static 'images/hero-pattern-dark.svg' %}')">
+        <div class="flex min-h-[80vh] flex-col justify-center h-full gap-4 px-4 mx-auto max-w-screen-xl lg:py-16 z-10 relative">
             <div>
                 <div>
-                    <h1 class="text-2xl md:text-4xl font-extrabold dark:text-white">{{resource.name}}</h1>
-                    <p class="my-4 text-lg text-gray-400">{{resource.description}}</p>
-                    <span>{{resource.type | upper}}</span>
+                    <h1 class="text-2xl md:text-4xl font-extrabold dark:text-white">{{ resource.name }}</h1>
+                    <p class="my-4 text-lg text-gray-400">{{ resource.description }}</p>
+                    <span>{{ resource.type | upper }}</span>
                 </div>
-
             </div>
-            <div class="flex-col gap-2">
-                <div class="relative"> <iframe id="pdfviewer" sandbox="allow-scripts allow-same-origin"
-                        src="https://docs.google.com/gview?url={{resource.file.url|urlencode}}&embedded=true"
-                        style="display: block;"
-                        class="w-full h-[90vh] relative z-10 mx-auto rounded-md overflow-hidden"></iframe>
-                    <div
-                        class="rounded-md w-full flex-col items-center justify-center -z-10 animate-pulse mx-auto left-0 right-0 h-[90vh] absolute top-0 bg-white/50">
-                        <div class="text-center text-black">Click on Close PDF if it takes too long to load pdf</div>
-                        <div class="w-80 rounded-full mx-auto absolute bottom-5 left-0 right-0 bg-white/40 h-10"></div>
+            {% if resource.type  != "video" %}
+                <div class="flex-col gap-2">
+                    <div class="relative">
+                        <iframe id="pdfviewer"
+                                sandbox="allow-scripts allow-same-origin"
+                                src="https://docs.google.com/gview?url={{ resource.file.url|urlencode }}&embedded=true"
+                                style="display: block"
+                                class="w-full h-[90vh] relative z-10 mx-auto rounded-md overflow-hidden"></iframe>
+                        <div class="rounded-md w-full flex-col items-center justify-center -z-10 animate-pulse mx-auto left-0 right-0 h-[90vh] absolute top-0 bg-white/50">
+                            <div class="text-center text-black">Click on Close PDF if it takes too long to load pdf</div>
+                            <div class="w-80 rounded-full mx-auto absolute bottom-5 left-0 right-0 bg-white/40 h-10"></div>
+                        </div>
+                    </div>
+                    <div class="space-x-1 mt-12">
+                        <button onclick="viewPdf(this)"
+                                data-pdf="pdfviewer"
+                                class="rounded-full bg-red-600 p-2 px-3">
+                            Close
+                            Pdf
+                        </button>
+                        {% if "download" in resource.privacy %}
+                            <a class="rounded-full bg-green-600 p-2 px-3"
+                               target="_blank"
+                               href="{{ resource.file.url }}">Download
+                                {{ resource.file.size|filesizeformat }}
+                            pdf</a>
+                        {% endif %}
                     </div>
                 </div>
-
-                <div class="space-x-1 mt-12">
-                    <button onclick="viewPdf(this)" data-pdf="pdfviewer" class="rounded-full bg-red-600 p-2 px-3">Close
-                        Pdf</button>
-
-                    {%if "download" in resource.privacy%}
-                    <a class="rounded-full bg-green-600 p-2 px-3" target="_blank" href="{{resource.file.url}}">Download
-                        {{resource.file.size|filesizeformat}}
-                        pdf</a>
-                    {%endif%}
+            {% else %}
+                <div class="flex w-full h-full">
+                    <iframe class="aspect-video w-full"
+                            src="https://www.youtube.com/embed/{{ video_id }}"
+                            title="{{ resource.name }} YouTube video player"
+                            frameborder="0"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                            referrerpolicy="strict-origin-when-cross-origin"
+                            allowfullscreen></iframe>
                 </div>
-            </div>
-        </div>
-        <div class="bg-gradient-to-b to-transparent from-slate-800 w-full h-full absolute top-0 left-0 -z-10">
+            {% endif %}
         </div>
+        <div class="bg-gradient-to-b to-transparent from-slate-800 w-full h-full absolute top-0 left-0 -z-10"></div>
     </main>
-
-
-{% endblock %}
+{% endblock %}

theme/static_src/tailwind.config.js

@@ -66,6 +66,6 @@ module.exports = {
         require('flowbite/plugin'),
         require('@tailwindcss/forms'),
         require('@tailwindcss/typography'),
-        require('@tailwindcss/aspect-ratio'),
+        // require('@tailwindcss/aspect-ratio'),
     ],
 }