made video adaptive, fixed csv preview

akarpov/files/migrations/0016_alter_file_file_type_alter_file_name.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2 on 2023-04-14 17:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("files", "0015_fileintrash_name"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="file",
+            name="file_type",
+            field=models.CharField(blank=True, max_length=255, null=True),
+        ),
+        migrations.AlterField(
+            model_name="file",
+            name="name",
+            field=models.CharField(blank=True, max_length=255, null=True),
+        ),
+    ]

akarpov/files/models.py

@@ -31,9 +31,9 @@ class File(TimeStampedModel, ShortLink):
     file = FileField(blank=False, upload_to=user_unique_file_upload)
 
     # meta
-    name = CharField(max_length=100, null=True, blank=True)
+    name = CharField(max_length=255, null=True, blank=True)
     description = TextField(blank=True, null=True)
-    file_type = CharField(max_length=50, null=True, blank=True)
+    file_type = CharField(max_length=255, null=True, blank=True)
 
     @property
     def file_image_url(self):

akarpov/files/previews/application/zip.py

@@ -96,6 +96,7 @@ def view(file: File) -> (str, str):
     """
     content = (
         """
+    <div class="col-auto">
     <div id="jstree_demo_div">
         <ul data-jstree='{ "opened" : true }>"""
         + f"""
@@ -108,7 +109,9 @@ def view(file: File) -> (str, str):
             {r}
         </li>
     </ul>
-    </div> """
+    </div>
+     </div>
+     """
         + """
     <script src="/static/js/jquery.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

akarpov/files/previews/image/basic.py

@@ -8,7 +8,7 @@ def view(file: File) -> (str, str):
     """
     content = (
         f"""
-        <div>
+        <div class='col-auto'>
           <img id="image" class="img-fluid" src="{file.file.url}" alt="Picture">
         </div>
         <div id="images">

akarpov/files/previews/text/common.py

@@ -37,7 +37,7 @@ def view(file: File) -> (str, str):
     <meta property="og:title" content="{file.name}" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-light.min.css">
     """
-    content = "<pre>"
+    content = "<div class='col-auto'><pre>"
     with file.file.open("r") as f:
         lines = f.readlines()
     for line in lines:
@@ -45,7 +45,7 @@ def view(file: File) -> (str, str):
             f"""<div class='code language-{extension}'>{html.escape(line)}</div>"""
         )
     content += (
-        """</pre>
+        """</pre></div>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
       """
         + f"""

akarpov/files/previews/text/csv.py

@@ -8,6 +8,37 @@
 logger = structlog.get_logger(__name__)
 
 
+def get_csv_table(reader):
+    content = "<div class='col-auto'><table class='table table-hover'>"
+    header = next(reader)
+    content += """<thead><tr>"""
+    for el in header:
+        content += f"""<th scope="col">{el}</th>"""
+    content += """</tr></thead>\n"""
+    if header:
+        content += """<tbody>"""
+        i = 0
+        for row in reader:
+            r = "<tr>"
+            if i >= 5000:
+                for _ in header:
+                    r += """<th>the remaining data was trunked</th>"""
+                r += "</tr>\n"
+                content += r
+                break
+            for ind, el in enumerate(row):
+                if ind == 0:
+                    r += f"""<th scope="row">{el}</th>"""
+                else:
+                    r += f"""<th>{el}</th>"""
+            r += "</tr>\n"
+            content += r
+            i += 1
+        content += """</tbody>"""
+    content += "</table></div>"
+    return content
+
+
 def view(file: File):
     try:
         try:
@@ -15,8 +46,7 @@ def view(file: File):
                 dialect = csv.Sniffer().sniff(csvfile.read(1024))
                 csvfile.seek(0)
                 reader = csv.reader(csvfile, dialect)
-                for row in reader:
+                content = get_csv_table(reader)
-                    print(row)
         except UnicodeDecodeError:
             rawdata = open("file.csv", "rb").read()
             enc = chardet.detect(rawdata)
@@ -25,10 +55,8 @@ def view(file: File):
                 dialect = csv.Sniffer().sniff(csvfile.read(1024))
                 csvfile.seek(0)
                 reader = csv.reader(csvfile, dialect)
-                for row in reader:
+                content = get_csv_table(reader)
-                    print(row)
     except Exception as e:
         logger.error(e)
     static = ""
-    content = ""
     return static, content

akarpov/files/previews/text/plain.py

@@ -14,10 +14,10 @@ def view(file: File) -> (str, str):
     static = f"""
     <meta property="og:title" content="{file.name}" />
     """
-    content = "<pre>"
+    content = "<div class='col-auto'><pre>"
     with file.file.open("r") as f:
         lines = f.readlines()
     for line in lines:
         content += f"""<div class='code language-plaintext'>{html.escape(line)}</div>"""
-    content += "</pre>"
+    content += "</pre></div>"
     return static, content

akarpov/files/previews/video/basic.py

@@ -11,15 +11,17 @@ def view(file: File) -> (str, str):
     <meta property="og:video:height" content="480" />
     <link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
     """
-    data = """{"playbackRates": [0.5, 1, 1.5, 2], "responsive": true, "fit": true, "fluid": true }"""
+    data = """{"playbackRates": [0.5, 1, 1.5, 2], fit: true }"""
     content = f"""
 
-      <video id="my_video_1" class="video-js vjs-default-skin" height="500px"
+    <div class="col-auto d-flex">
+      <video id="video" class="video-js vjs-default-skin"
           controls poster='{file.preview.url if file.preview else ''}'
+          preload="auto"
           data-setup='{data}'>
         <source src="{file.file.url}" type='{file.file_type}' />
       </video>
-
+    </div>
       <script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
     """
 

akarpov/files/previews/video/mp4.py

@@ -11,15 +11,16 @@ def view(file: File) -> (str, str):
     <meta property="og:video:height" content="480" />
     <link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
     """
-    data = """{"playbackRates": [0.5, 1, 1.5, 2], "responsive": true, "fit": true, "fluid": true }"""
+    data = """{"playbackRates": [0.5, 1, 1.5, 2], fit: true }"""
     content = f"""
-
+    <div class="col-auto d-flex">
-      <video id="my_video_1" class="video-js vjs-default-skin"
+      <video id="video" class="video-js vjs-default-skin"
           controls poster='{file.preview.url if file.preview else ''}'
+          preload="auto"
           data-setup='{data}'>
         <source src="{file.file.url}" type='{file.file_type}' />
       </video>
-
+    </div>
       <script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
     """
 

akarpov/templates/files/view.html

@@ -39,11 +39,9 @@
       {% endif %}
     </div>
   </div>
-  <div class="col-md-8 col-sm-10 col-xs-auto mt-xs-4">
   {% autoescape off %}
   {{ preview_content }}
   {% endautoescape %}
-  </div>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
 <script>