fixed problems with dashboard video size;

added placeholder image for thumbnail

public/css/dashboard.css

@@ -9,7 +9,6 @@
 
 .video-tile {
     position: relative;
-    padding: 3%;
 }
 
 .video-tile:after {
@@ -19,7 +18,11 @@
 }
 
 .tile-content {
-    position: relative;
+    position: absolute;
+    left: 8.5%;
+    top: 8.5%;
+    height: 83%;
+    width: 83%;
 }
 
 .thumbnail {

src/Controller/WatchController.php

@@ -26,6 +26,7 @@ class WatchController extends AbstractController
     public const OWNER_LINK_ID = "owner";
     public const CONTENT_RELATIVE = "../";
     public const CONTENT_DIRECTORY = "content/videos/";
+    public const PUBLIC_DIRECTORY = "public/";
 
     private const PLAYLIST_MIME_TYPE = "application/x-mpegURL";
     private const TS_FILE_MIME_TYPE = "video/MP2T";
@@ -158,7 +159,11 @@ class WatchController extends AbstractController
     {
         $data = $this->checkRequestData($videoId, $linkId);
 
-        $file = self::CONTENT_RELATIVE . self::CONTENT_DIRECTORY . $data["video"]->getId() . "/" . "thumb.png";
+        if ($data["video"]->getState() > Video::PROCESSING_THUMBNAIL) {
+            $file = self::CONTENT_RELATIVE . self::CONTENT_DIRECTORY . $data["video"]->getId() . "/" . "thumb.png";
+        } else {
+            $file = self::CONTENT_RELATIVE . self::PUBLIC_DIRECTORY . "images/no-video.png";
+        }
 
         $response = new BinaryFileResponse($file);
         $response->headers->set("Content-Type", self::THUMBNAIL_MIME_TYPE);

src/Entity/Video.php

@@ -225,6 +225,31 @@ class Video
         return $this->length;
     }
 
+    public function getFormatedLength(): string
+    {
+        if (!$this->length) {
+            return "";
+        } else {
+            $length = $this->length;
+            $result = "";
+
+            while ($length > 0) {
+                $currentPosition = $length % 60;
+                $length = intval($length / 60);
+
+                $result = sprintf("%02d:", $currentPosition) . $result;
+            }
+
+            $result = substr($result, 0, strlen($result) - 1);
+
+            if (strlen($result) == 2) {
+                $result = "00:" . $result;
+            }
+
+            return $result;
+        }
+    }
+
     public function setLength(?float $length): self
     {
         $this->length = $length;

templates/dashboard/dashboard.html.twig

@@ -19,12 +19,9 @@
                             element.getElementsByClassName("disable")[0].remove();
                             clearInterval(intervalIds[id]);
                         } else {
-
                             if (data.stateId > {{ constant("App\\Entity\\Video::PROCESSING_THUMBNAIL") }}) {
                                 let image = element.getElementsByClassName("thumbnail")[0].getElementsByTagName("img")[0];
-                                if (image.hasAttribute("data-src")) {
-                                    image.src = image.getAttribute("data-src");
-                                }
+                                image.src = image.src + "?refresh";
                             }
 
                             element.getElementsByClassName("state")[0].innerText = data.state;
@@ -58,11 +55,10 @@
                             videoId: video.customId
                         }) }}'">
                             <img alt="Thumbnail"
-                            {{ video.state > constant("App\\Entity\\Video::PROCESSING_THUMBNAIL") ? "src" : "data-src" }}
-                            ="{{ path("app_watch_thumbnail", {
-                                linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
-                                videoId: video.customId
-                            }) }}"/>
+                                 src="{{ path("app_watch_thumbnail", {
+                                     linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
+                                     videoId: video.customId
+                                 }) }}"/>
                             <div class="play-button">
                                 <i class="fas fa-play"></i>
                             </div>
@@ -77,6 +73,9 @@
                             <div class="views">
                                 {{ video.views }} {{ video.views == 1 ? "View" : "Views" }}
                             </div>
+                            <div class="length">
+                                {{ video.getFormatedLength() }}
+                            </div>
                             <p>
                                 {{ video.description }}
                             </p>