change ui

app/templates/home.html

@@ -4,9 +4,14 @@
         Available Sources
     </h1>
     <div class="mx-auto my-2 p-2 w-full">
-        <div class="block md:flex md:flex-wrap md:justify-center md:content-center md:items-center w-full text-center break-words">
+        <div class="block p-4 md:flex md:flex-wrap md:justify-center w-full text-center break-words">
             {% for chat in chats %}
-                <div class="w-full h-full md:w-2/5 lg:w-1/4 border border-blue-300 rounded bg-blue-100 hover:bg-blue-200 p-4 my-2 md:mx-1 shadow-md transition ease-in duration-150"> <a href="/{{chat.id}}" > {{chat.name}} </a> </div>
+                <a title="{{chat.name}}" href="/{{chat.id}}" class="flex flex-col justify-around w-full min-h-full md:w-2/5 lg:w-1/4 rounded my-2 md:mx-1 shadow-md hover:shadow-lg hover:border-blue-300 hover:bg-blue-100">
+                
+                    <img src="/{{chat.id}}/logo?big=1" class="w-full rounded-full ">
+                    <div class="p-4 rounded">{{chat.name}}</div>
+                
+                </a>
             {% endfor %}
         </div>
     </div>

app/templates/index.html

@@ -1,70 +1,68 @@
 {% include 'header.html' %}
             
-            <div class="block md:flex justify-between items-center px-4 text-center">
+            <div class="block md:flex justify-between items-center px-4 text-center border-b-2">
-                <div class="my-2 block md:flex items-center justify-center md:justify-start text-2xl md:text-right font-bold text-blue-500">
+                <div class="m-2 block md:flex items-center justify-center md:justify-start text-2xl md:text-right font-bold text-blue-500">
                     <img class="mx-auto md:ml-0 md:mr-1 my-2 w-16 h-16 rounded-full bg-black outline-none" src="{{logo}}">
                     <h1> {{name}} </h1>
                 </div>
                 
-                <div class="my-2">
+                <div class="m-2">
                     <form class="">
                         <input class="border rounded-full px-4 py-2 border-indigo-500 placeholder-indigo-500 text-indigo-500 outline-none" type="text" name="search" value="{% if search %}{{search}}{% endif %}" placeholder="search...">
                     </form>
                 </div>
                 
             </div>
-
-            <div class="mx-auto my-2 w-full px-4">
             
-                <table class="rounded text-left shadow-md w-full text-sm md:text-base">
+            {% if item_list %}
-                    <thead>
-                        <tr class="border-t border-b bg-gray-200 border-gray-300 my-2 p-4">
-                            <th class="my-2 p-2 hidden md:table-cell">Media</th> 
-                            <th class="my-2 p-2 hidden md:table-cell">Type</th>
-                            <th class="my-2 p-2">Item description</th>
-                            <th class="my-2 p-2 hidden md:table-cell">DateTime</th>
-                            <th class="my-2 p-2 hidden md:table-cell">Size</th>
-                        </tr>
-                    </thead>
 
-                    <tbody>
+                <div class="mx-auto my-2 w-full px-4">
-
+                    <div class="block md:flex md:flex-wrap md:justify-center text-center break-all">
-                        {% for item in item_list %}
+                    {% for item in item_list %}
-                            <tr id="{{item.file_id}}" class="border-t border-b border-gray-300 my-4 p-4 rounded hover:bg-blue-100">
+                        <a title="{% if item.media %} {{item.mime_type}} | {{item.size}} {% else %} Text message {% endif %}" href="{{item.url}}" class="flex flex-col items-center justify-center w-full min-h-full md:w-1/5 lg:w-1/6 rounded my-4 md:mx-1 shadow-md hover:shadow-lg hover:bg-blue-100 hover:border hover:border-blue-200">
-                                <td class="my-2 p-2 hidden md:table-cell">{{item.media}}</td> 
-                                <td class="my-2 p-2 hidden md:table-cell">{{item.mime_type}}</td>
-                                <td class="my-2 p-2 rounded hover:text-blue-600 break-all"><a title="{{item.insight}}" href="{{item.url}}">{{item.insight}}</a></td>
-                                <td class="my-2 p-2 hidden md:table-cell" name="date" data-date="{{item.date}}"></td>
-                                <td class="my-2 p-2 hidden md:table-cell">{{item.size}}</td>
-                            </tr>
-                        {% endfor %}
-                    </tbody>
                     
-                </table>
+                            {% if item.media %}
+                                <img src="{{item.thumbnail}}" class="w-full rounded">
+                                <div class="p-4 rounded">{{item.insight}}</div>
+                            {% else %}
+                                <div class="p-4 rounded">{{item.insight}}</div>
+                            {% endif %}
+                            
+                        </a>
+                    {% endfor %}
+                    </div>
             
-            </div>
+                </div>
 
-            <p class="my-2 text-center font-semibold">
+                <p class="my-2 text-center font-semibold">
-                {{item_list|length}} items
+                    {{item_list|length}} items
-            </p>
+                </p>
+                
+                <div class="mx-auto my-2 text-center flex text-white content-center justify-center">
+                    {% if prev_page %}
+                        <a title="Previous page" class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white" href="{{prev_page.url}}">Page {{prev_page.no}}</a>
+                    {% endif %}
+                    <p class="mx-2 p-2 border rounded border-green-500 text-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white">Page {{cur_page}}</p>
+                    {% if next_page %}
+                        <a title="Next page" class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white" href="{{next_page.url}}">Page {{next_page.no}}</a>
+                    {% endif %}
+                </div>
+                
+                <script>
+                    const date_elements = document.getElementsByName('date');
+                    date_elements.forEach((item) => {
+                        let dataDate = item.getAttribute("data-date");
+                        let date = new Date(dataDate);
+                        item.innerHTML = date.toLocaleString()
+                    });
+                </script>
             
-            <div class="mx-auto my-2 text-center flex text-white content-center justify-center">
+            {% else %}
-                {% if prev_page %}
+                
-                    <a class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white" href="{{prev_page.url}}">Page {{prev_page.no}}</a>
+                <p class="my-4 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
-                {% endif %}
+                    No message to display!
-                <p class="mx-2 p-2 border rounded border-green-500 text-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white">Page {{cur_page}}</p>
+                </p>
-                {% if next_page %}
+            
-                    <a class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white" href="{{next_page.url}}">Page {{next_page.no}}</a>
+            {% endif %}
-                {% endif %}
-            </div>
-
-            <script>
-                const date_elements = document.getElementsByName('date');
-                date_elements.forEach((item) => {
-                    let dataDate = item.getAttribute("data-date");
-                    let date = new Date(dataDate);
-                    item.innerHTML = date.toLocaleString()
-                });
-            </script>
 
 {% include 'footer.html' %}

app/templates/info.html

@@ -52,6 +52,7 @@
                                 </div>
                                 
                                 <div id="my-audio-wrapper">
+                                    <img class="mx-auto rounded w-full" src="../{{id}}/thumbnail" alt="{{name}}">
                                     <audio class="mx-auto" controls muted>
                                         <source src="../{{id}}/download" type="audio/mpeg" />
                                     </audio>
@@ -71,7 +72,7 @@
                             {% if caption %}
                             
                                 <div class="mx-auto mt-1">
-                                    <div class="flex justify-center text-gray-300 font-mono text-xs lg:text-sm xl:text-lg">
+                                    <div class="flex justify-center text-gray-300 font-mono">
                                         <p class="text-left w-full rounded p-4 bg-gray-900 shadow-lg"> {{ caption|safe }} </p>
                                     </div>
                                     {% if reply_btns %}
@@ -91,14 +92,14 @@
                             
                         </div>
                         
-                        <div class="text-center text-white text-sm xl:text-2xl">
+                        <div class="text-center text-white">
                     
                             <a class="rounded p-3 bg-indigo-500 hover:bg-indigo-700 shadow-lg" href="../{{id}}/download">Download Now! ({{ size }})</a>
                         
                         </div>
                     {% else %}
                         <div class="mx-auto flex flex-wrap justify-center w-full md:w-3/4 mt-1">
-                            <div class="flex justify-center text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
+                            <div class="flex justify-center text-gray-300 font-mono">
                                 <p class="text-left rounded p-4 bg-gray-900 w-full shadow-lg"> {{ text|safe }} </p>
                             </div>
                             {% if reply_btns %}

app/views.py

@@ -1,4 +1,7 @@
 import logging
+from PIL import Image, ImageDraw, ImageFont
+import random
+import io
 
 from aiohttp import web
 import aiohttp_jinja2
@@ -37,6 +40,7 @@ class Views:
         alias_id = req.rel_url.path.split('/')[1]
         chat = [i for i in chat_ids if i['alias_id'] == alias_id][0]
         chat_id = chat['chat_id']
+        chat_name = chat['title']
         log_msg = ''
         try:
             offset_val = int(req.query.get('page', '1'))
@@ -71,8 +75,9 @@ class Views:
                 entry = dict(
                     file_id=m.id,
                     media=True,
+                    thumbnail=req.rel_url.with_path(f"/{alias_id}/{m.id}/thumbnail"),
                     mime_type=m.file.mime_type,
-                    insight = get_file_name(m)[:55],
+                    insight = get_file_name(m)[:100],
                     date = m.date,
                     size=get_human_size(m.file.size),
                     url=req.rel_url.with_path(f"/{alias_id}/{m.id}/view")
@@ -82,7 +87,7 @@ class Views:
                     file_id=m.id,
                     media=False,
                     mime_type='text/plain',
-                    insight = m.raw_text[:55],
+                    insight = m.raw_text[:100],
                     date = m.date,
                     size=get_human_size(len(m.raw_text)),
                     url=req.rel_url.with_path(f"/{alias_id}/{m.id}/view")
@@ -116,7 +121,8 @@ class Views:
             'next_page': next_page,
             'search': search_query,
             'name' : chat['title'],
-            'logo': req.rel_url.with_path(f"/{alias_id}/logo")
+            'logo': req.rel_url.with_path(f"/{alias_id}/logo"),
+            'title' : "Index of " + chat_name
         }
 
 
@@ -199,27 +205,43 @@ class Views:
         alias_id = req.rel_url.path.split('/')[1]
         chat = [i for i in chat_ids if i['alias_id'] == alias_id][0]
         chat_id = chat['chat_id']
+        chat_name = "Image not available"
         try:
             photo = await self.client.get_profile_photos(chat_id)
         except:
             log.debug(f"Error in getting profile picture in {chat_id}", exc_info=True)
             photo = None
         if not photo:
-            return web.Response(status=404, text="404: Chat has no profile photo")
+            W, H = (160, 160) if req.query.get('big', None) else (80, 80)
-        photo = photo[0]
+            c = lambda : random.randint(0, 255)
-        size =  photo.sizes[0]
+            color = tuple([c() for i in range(3)])
-        media = types.InputPhotoFileLocation(
+            im = Image.new("RGB", (W,H), color)
-            id=photo.id,
+            draw = ImageDraw.Draw(im)
-            access_hash=photo.access_hash,
+            w, h = draw.textsize(chat_name)
-            file_reference=photo.file_reference,
+            draw.text(((W-w)/2,(H-h)/2), chat_name, fill="white")
-            thumb_size=size.type
+            temp = io.BytesIO()
-        )
+            im.save(temp, "PNG")
-        body = self.client.iter_download(media)
+            body = temp.getvalue()
+        else:
+            photo = photo[0]
+            pos = -1 if req.query.get('big', None) else int(len(photo.sizes)/2)
+            size = self.client._get_thumb(photo.sizes, pos)
+            if isinstance(size, (types.PhotoCachedSize, types.PhotoStrippedSize)):
+                body = self.client._download_cached_photo_size(size, bytes)
+            else:
+                media = types.InputPhotoFileLocation(
+                    id=photo.id,
+                    access_hash=photo.access_hash,
+                    file_reference=photo.file_reference,
+                    thumb_size=size.type
+                )
+                body = self.client.iter_download(media)
+        
         r = web.Response(
             status=200,
             body=body,
         )
-        r.enable_chunked_encoding()
+        #r.enable_chunked_encoding()
         return r
     
     
@@ -256,25 +278,29 @@ class Views:
             location = types.InputPhotoFileLocation
         
         if not thumbnails:
-            log.debug(f"no thumbnail for {file_id} in {chat_id}")
+            c = lambda : random.randint(0, 255)
-            return web.Response(status=404, text="404: Not Found")
+            color = tuple([c() for i in range(3)])
-        
+            im = Image.new("RGB", (100, 100), color)
-        thumb_pos = int(max(0, len(thumbnails)/2))
+            temp = io.BytesIO()
-        thumbnail = self.client._get_thumb(thumbnails, thumb_pos)
+            im.save(temp, "PNG")
-        if not thumbnail or isinstance(thumbnail, types.PhotoSizeEmpty):
+            body = temp.getvalue()
-            return web.Response(status=410, text="410: Gone. Access to the target resource is no longer available!")
-        
-        if isinstance(thumbnail, (types.PhotoCachedSize, types.PhotoStrippedSize)):
-            body = self.client._download_cached_photo_size(thumbnail, bytes)
         else:
-            actual_file = location(
+            thumb_pos = int(len(thumbnails)/2)
-                id=media.id,
+            thumbnail = self.client._get_thumb(thumbnails, thumb_pos)
-                access_hash=media.access_hash,
+            if not thumbnail or isinstance(thumbnail, types.PhotoSizeEmpty):
-                file_reference=media.file_reference,
+                return web.Response(status=410, text="410: Gone. Access to the target resource is no longer available!")
-                thumb_size=thumbnail.type
+            
-            )
+            if isinstance(thumbnail, (types.PhotoCachedSize, types.PhotoStrippedSize)):
-        
+                body = self.client._download_cached_photo_size(thumbnail, bytes)
-            body = self.client.iter_download(actual_file)
+            else:
+                actual_file = location(
+                    id=media.id,
+                    access_hash=media.access_hash,
+                    file_reference=media.file_reference,
+                    thumb_size=thumbnail.type
+                )
+            
+                body = self.client.iter_download(actual_file)
         
         r = web.Response(
             status=200,