added: clip box art download

seriousm4x · Feb 8, 2022 · e185f9b · e185f9b
1 parent b813a74
commit e185f9b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 29 deletions.
diff --git a/wubbl0rz_archiv/clips/admin.py b/wubbl0rz_archiv/clips/admin.py
@@ -13,7 +13,7 @@ class ClipAdmin(admin.ModelAdmin):
 
 
 class GameAdmin(admin.ModelAdmin):
-    list_display = ["name", "game_id"]
+    list_display = ["name", "game_id", "box_art"]
     search_fields = ["name", "game_id"]
     ordering = ["name"]
 

diff --git a/wubbl0rz_archiv/clips/migrations/0002_game_box_art.py b/wubbl0rz_archiv/clips/migrations/0002_game_box_art.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.0.2 on 2022-02-08 21:03
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('clips', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='game',
+            name='box_art',
+            field=models.URLField(null=True),
+        ),
+    ]
diff --git a/wubbl0rz_archiv/clips/models.py b/wubbl0rz_archiv/clips/models.py
@@ -1,3 +1,4 @@
+from pyexpat import model
 from django.db import models
 from vods.models import Vod
 
@@ -13,6 +14,7 @@ def gen_id():
 class Game(models.Model):
     game_id = models.PositiveIntegerField()
     name = models.CharField(max_length=150, default="Unknown")
+    box_art = models.URLField(null=True)
 
     def __str__(self):
         return self.name

diff --git a/wubbl0rz_archiv/clips/tasks.py b/wubbl0rz_archiv/clips/tasks.py
@@ -8,9 +8,11 @@
 from main.models import ApiStorage
 from main.tasks import Downloader
 from main.twitch_api import TwitchApi
+import shutil
 
 from clips.models import Clip, Game
 
+
 class ClipDownloader:
     def __init__(self):
         self.clipdir = os.path.join(settings.MEDIA_ROOT, "clips")
@@ -81,10 +83,16 @@ def game(self, obj):
             f"https://api.twitch.tv/helix/games?id={obj.game_id}", headers=self.helix_header)
         try:
             game_title = game_req.json()["data"][0]["name"]
+            box_art = game_req.json()["data"][0]["box_art_url"].replace(
+                r"{width}x{height}", "100x133")
+            resp = requests.get(box_art, stream=True)
+            with open(os.path.join(self.gamedir, str(obj.game_id) + ".jpg"), "wb") as f:
+                shutil.copyfileobj(resp.raw, f)
             Game.objects.update_or_create(
                 game_id=obj.game_id,
                 defaults={
-                    "name": game_title
+                    "name": game_title,
+                    "box_art": box_art
                 }
             )
         except IndexError:

diff --git a/wubbl0rz_archiv/clips/templates/single_clip.html b/wubbl0rz_archiv/clips/templates/single_clip.html
@@ -73,13 +73,37 @@
                                 <img src="{{ MEDIA_URL }}games/{{ clip.game.game_id }}.jpg" alt="{{ clip.game }}" loading="lazy">
                             </div>
                             <div class="col-auto">
-                                {{ clip.date|date }} - {{ clip.date|time }} Uhr<br>
-                                {{ clip.view_count }} Views, erstellt von: {{ clip.creator.name }}<br>
-                                Kategorie: {{ clip.game.name }}
+                                <div class="row">
+                                    <div class="col">
+                                        {{ clip.date|date }} - {{ clip.date|time }} Uhr<br>
+                                        {{ clip.view_count }} Views, erstellt von: {{ clip.creator.name }}<br>
+                                        Kategorie: {{ clip.game.name }}
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col lh-lg mt-2">
+                                        <button class="btn btn-sm" type="button" data-bs-toggle="collapse"
+                                            data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+                                            Mehr anzeigen
+                                        </button>
+                                        <a href="/clips/watch/{{ clip.uuid }}?dl=1" class="btn btn-sm">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
+                                                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                                                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+                                            </svg>
+                                            Download
+                                        </a>
+                                        <button type="button" class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#hotkeyModal">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-keyboard" viewBox="0 0 16 16">
+                                                <path d="M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h12zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2z"/>
+                                                <path d="M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75v-.5zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-.5zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75v-.5zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75v-.5zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75v-.5zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75v-.5zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75v-.5zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75v-.5zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75v-.5zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25v-.5z"/>
+                                                </svg>
+                                                Hotkeys
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                        <p class="text-muted">
-                        </p>
                     </div>
                     <div class="share-button">
                         <div class="dropdown">
@@ -116,26 +140,6 @@
                     Bitrate: {{ clip.bitrate|filesizeformat }}it/s<br>
                     Größe: {{ clip.size|filesizeformat }}
                 </p>
-                <p class="lh-lg">
-                    <button class="btn btn-sm" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
-                        Mehr anzeigen
-                    </button>
-                    <a href="/clips/watch/{{ clip.uuid }}?dl=1" class="btn btn-sm">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
-                            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-                            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
-                        </svg>
-                        Download
-                    </a>
-                    <button type="button" class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#hotkeyModal">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-keyboard" viewBox="0 0 16 16">
-                            <path d="M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h12zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2z"/>
-                            <path d="M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75v-.5zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-.5zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75v-.5zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75v-.5zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75v-.5zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75v-.5zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75v-.5zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75v-.5zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75v-.5zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25v-.5z"/>
-                            </svg>
-                            Hotkeys
-                    </button>
-                </p>
             </div>
             {% if clip.vod %}
                 <hr class="my-4">

diff --git a/wubbl0rz_archiv/main/static/css/style.css b/wubbl0rz_archiv/main/static/css/style.css
diff --git a/wubbl0rz_archiv/main/static/theme.scss b/wubbl0rz_archiv/main/static/theme.scss
@@ -524,7 +524,7 @@ table {
     }
 
     .share-button {
-        margin-bottom: 1rem;
+        margin: 1rem 0;
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -524,7 +524,7 @@ table { @@
         }
         .share-button {
-            margin-bottom: 1rem;
+            margin: 1rem 0;
         }
     }
@@ Expand Down @@