Handling binary files in repository

3 files changed, 55 insertions, 18 deletions

diff --git a/dev_status/views.py b/dev_status/views.py
index 96ad7d42..bf44f464 100644
--- a/dev_status/views.py
+++ b/dev_status/views.py
@@ -136,6 +136,9 @@ def get_repo(request, r=None, p=None):
     query = """
     query {{
         repository(owner: "luciferreeves", name: "{repo}") {{
+            defaultBranchRef {{
+                name
+            }}
             object(expression: "HEAD:{path}") {{
                 ... on Tree {{
                     entries {{
@@ -157,6 +160,7 @@ def get_repo(request, r=None, p=None):
     """.format(
         repo=r, path=p
     )
+
     data = requests.post(url, json={"query": query}, headers=headers).json()
 
     tree = []
@@ -167,6 +171,8 @@ def get_repo(request, r=None, p=None):
     except:
         viewMode = "blob"
 
+    # default_branch = data["data"]["repository"]["defaultBranchRef"]["name"]
+
     # order tree by name and folder first if it is a tree
     if viewMode == "tree":
         tree = sorted(
@@ -183,7 +189,6 @@ def get_repo(request, r=None, p=None):
         if not tree["isBinary"]:
             tree["lines"] = text_lines(tree["text"])
             tree["loc"] = text_loc(tree["text"])
-            tree["size"] = size_format(tree["byteSize"])
             tree["text"] = highlight_code(tree["text"], tree["name"])
 
     # get commit information for each file or directory
@@ -231,4 +236,12 @@ def get_repo(request, r=None, p=None):
     context["parent"] = parent
     context["repo"] = r
 
+    if "byteSize" in tree:
+        tree["size"] = size_format(tree["byteSize"])
+    # isImage?
+    if viewMode == "blob":
+        context["files"]["def_branch"] = data["data"]["repository"]["defaultBranchRef"]["name"]
+        if tree["name"].endswith((".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".ico", ".bmp")):
+            context["files"]["isImage"] = True
+
     return render(request, "dev_status/repo.html", context)
diff --git a/static/images/site/icons/Folder.png b/static/images/site/icons/Folder.png
new file mode 100644
index 00000000..b2c0ced5
--- /dev/null
+++ b/static/images/site/icons/Folder.png
diff --git a/templates/dev_status/repo.html b/templates/dev_status/repo.html
index b880517b..c5df710b 100644
--- a/templates/dev_status/repo.html
+++ b/templates/dev_status/repo.html
@@ -17,7 +17,7 @@
 <p>
   <span title="Go to parent directory" style="margin-right: 5px">
     <img
-      src="{% static 'images/site/icons/folder.gif' %}"
+      src="{% static 'images/site/icons/Folder.png' %}"
       alt="Folder"
       style="display: inline-block; vertical-align: middle; height: 16px"
     />
@@ -44,7 +44,7 @@
         {% if file.type == 'tree' %}
         <span title="Directory" style="margin-right: 5px">
           <img
-            src="{% static 'images/site/icons/folder.gif' %}"
+            src="{% static 'images/site/icons/Folder.png' %}"
             alt="Folder"
             style="display: inline-block; vertical-align: middle; height: 16px"
           />
@@ -95,22 +95,46 @@
   </div>
   {{files.text|safe}}
 </div>
+{% endif %} {% if "byteSize" in files and files.isBinary %}
 
-  {% comment %}
-  <p>
-    <span title="File" style="margin-right: 5px">
-      <img
-        src="{% static 'images/icons/notepad_file-2.png' %}"
-        alt="File"
-        style="display: inline-block; vertical-align: middle; height: 16px"
-      />
-    </span>
-    <a href="{% url 'dev_status:repo-path' repo files.path %}"
-      >{{ files.name }}</a
+<div
+  style="
+    background: #272727a3;
+    border: 1px solid #434343;
+    border-radius: 8px 8px 2px 2px;
+  "
+>
+  <div
+    style="
+      background: #353535;
+      padding: 0px 10px;
+      border-radius: 8px 8px 0px 0px;
+    "
+  >
+    <h4 style="margin: 0; margin-left: 10px">
+      Viewing
+      <a href="{% url 'dev_status:repo-path' repo files.path %}"
+        >{{ files.name }}</a
+      >
+      <pre style="display: inline-block; margin-left: 10px">
+{{ files.size }}</pre
+      >
+    </h4>
+  </div>
+  {% if files.isImage == True %}
+  <img
+    src="https://raw.githubusercontent.com/luciferreeves/{{repo}}/{{files.def_branch}}/{{files.path}}"
+    style="max-width: 100%; display: block; margin: 40px auto"
+    alt="{{files.name}}"
+  />
+  {% else %}
+  <p style="margin: 20px; text-align: center">Binary file, cannot display</p>
+  <p style="margin: 20px; text-align: center">
+    Download
+    <a
+      href="https://raw.githubusercontent.com/luciferreeves/{{repo}}/{{files.def_branch}}/{{files.path}}"
+      >here</a
     >
-    - {{ files.size }}
   </p>
-
-  <pre>{{ files.text }}</pre>
-  {% endcomment %} {% endif %} {% endblock %}
+  {% endif %} {% endif %} {% endblock content %}
 </div>