add profile picture to watch page

config/packages/twig.yaml

@@ -1,3 +1,3 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
-    form_themes: [ 'bootstrap_4_layout.html.twig' ]
+    form_themes: [ 'bootstrap_4_layout.html.twig' ]

public/css/watch.css

@@ -19,7 +19,7 @@
     padding: 1%;
 }
 
-#description {
+#info {
     width: 73.5%;
     padding: 1%;
     position: relative;
@@ -29,4 +29,26 @@
     position: absolute;
     top: 7%;
     right: 3%;
+}
+
+.user {
+}
+
+.user img {
+    height: 3vw;
+    margin-right: 1vw;
+}
+
+.user span {
+    font-size: 1vw;
+}
+
+h2 {
+    position: absolute;
+    top: 1vw;
+    left: 10vw;
+}
+
+.description {
+    margin-left: 4vw;
 }

templates/watch/watch.html.twig

@@ -65,14 +65,22 @@
                 </p>
             </video>
         </div>
-        <div id="description" class="bg-light shadow-5-strong">
+        <div id="info" class="bg-light shadow-5-strong">
+            <div class="user">
+                <img
+                        src="{{ path("app_user_profile_picture", {"username": video.uploader.username}) }}"
+                        class="rounded-circle avatar"
+                        alt=""
+                />
+                <span>{{ video.uploader.name }}</span>
+            </div>
             <h2>{{ video.name }}</h2>
             <div class="views">
                 {{ video.views }} {{ video.views == 1 ? "View" : "Views" }}
             </div>
-            <p>
+            <div class="description">
                 {{ video.description }}
-            </p>
+            </div>
         </div>
         <div id="set" class="bg-light shadow-5-strong">
             <h2>Set</h2>