✨ Add download, m3u ,stream buttons for item

app/templates/index.html

@@ -1,5 +1,13 @@
 {% include 'header.html' %}
 
+
+{% block javascript %}
+<script type="text/javascript">
+    {% include "./js/filesaver.min.js" %}
+    {% include "./js/playlist.js" %}
+</script>
+{% endblock %}
+
 <div class="block md:flex justify-between items-center px-4 text-center border-b-2">
     <div
         class="m-2 block md:flex items-center justify-center md:justify-start text-2xl md:text-right font-bold text-blue-500">
@@ -9,58 +17,90 @@
 
     <div class="m-2">
         <form class="">
-            
-               <div class="p-0">
-                    <div class=" flex items-center rounded-full shadow">
-                      <input class=" rounded-l-full w-full py-1 px-6 text-gray-700 leading-tight focus:outline-none" name="search" id="search" value="{% if search %}{{search}}{% endif %}" type="text" placeholder="Search">
-                      <div class="p-1">
-                        <button class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none w-12 h-12 flex items-center justify-center">
-                            <div><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                              </svg></div>
-                        </button>
-                        </div>
-                      </div>
-                    </div>
 
-            </form>
+            <div class="p-0">
+                <div class=" flex items-center rounded-full shadow">
+                    <input class=" rounded-l-full w-full py-1 px-6 text-gray-700 leading-tight focus:outline-none"
+                        name="search" id="search" value="{% if search %}{{search}}{% endif %}" type="text"
+                        placeholder="Search">
+                    <div class="p-1">
+                        <button
+                            class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none w-12 h-12 flex items-center justify-center">
+                            <div><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                </svg></div>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+        </form>
     </div>
 
 </div>
 
 {% if item_list %}
 
-<div class="mx-auto my-2 w-full px-4">
+<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">
+    <div class="block  md:flex md:flex-wrap md:justify-center text-center break-all ">
         {% for item in item_list %}
 
+        <!-- Card  -->
         <div title="{% if item.media %} {{item.mime_type}} | {{item.human_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">
+            class="text-sm 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 hover:shadow-md border-solid ">
 
             <div class="bg-blue-500 rounded text-white my-1 py-0 px-1">{{item.file_id}}</div>
 
-
             {% if item.media %}
 
+            <a href="{{item.url}}"><img src="{{item.thumbnail}}" class="w-full rounded shadow-inner"></a>
 
-            <a href="{{item.url}}"><img src="{{item.thumbnail}}" class="w-full rounded"></a>
 
-            <div class="p-4 rounded bg-blue-100 rounded text-dark py-0 px-2 my-1">{{item.insight}}</div>
+            <!-- Buttons container -->
+            <span class="item-buttons my-1 rounded shadow-inner">
 
-            <span class="item-buttons my-1">
+                <div class="p-4 text-dark py-0 px-2 my-1 ">{{item.insight}}</div>
 
+                <!-- Direct file download button -->
                 <a href="{{item.download}}"
                     class=" hover:bg-blue-300 text-gray-900 font-semibold py-1 px-2 rounded inline-flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
                     </svg>
                 </a>
 
+                <!--  Kodi/media player supported url ending with v.mp4 -->
+                <a title="v.mp4" href="{{item.vlc}}"
+                    class=" hover:bg-blue-300 text-gray-900 font-semibold py-1 px-2 rounded inline-flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </a>
+
+                <!-- One click single item playlist Download -->
+                <button title="{{item.insight}}.m3u" onclick='singleItemPlaylist("{{item.vlc}}","{{item.insight}}")'
+                    class=" hover:bg-blue-300 text-gray-900 font-semibold py-1 px-2 rounded inline-flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" />
+                    </svg>
+                </button>
+
             </span>
+
             {% else %}
             <a href={{item.url}}>
-                <div class="p-4 rounded bg-blue-100 rounded text-dark py-0 px-2">{{item.insight}}</div>
+                <div class="p-4 rounded shadow-inner rounded text-dark py-0 px-2">{{item.insight}}</div>
             </a>
             {% endif %}