close #124 display video and audio in gallery view

3 files changed, 36 insertions, 11 deletions

diff --git a/app/class/Media.php b/app/class/Media.php
index 1a1e54a..8ecc872 100644
--- a/app/class/Media.php
+++ b/app/class/Media.php
@@ -86,29 +86,33 @@ class Media extends Item
 
     /**
      * Generate html code depending on media type
-     *
+     * @param bool $fullpath option to use fullpath of file instead of W rendered one. default is false
      * @return string html code
      */
-    public function getcode(): string
+    public function getcode($fullpath = false): string
     {
+        if ($fullpath === true) {
+            $src = $this->getfullpath();
+        } else {
+            $src = $this->getincludepath();
+        }
+
         switch ($this->type) {
             case 'image':
-                $code = '![' . $this->id . '](' . $this->getincludepath() . ')';
+                $code = '![' . $this->id . '](' . $src . ')';
                 break;
                 
             case 'sound':
-                    $code = '<audio controls src="' . $this->getincludepath() . '"></audio>';
+                    $code = '<audio controls src="' . $src . '"></audio>';
                 break;
                 
             case 'video':
-                $src = $this->getincludepath();
                 $ext = $this->extension;
-                $code = '&lt;video controls=&quot;&quot;&gt;';
-                $code .= '&lt;source src=&quot;' . $src . '&quot; type=&quot;video/' . $ext . '&quot;&gt;&lt;/video&gt;';
+                $code = '<video controls=""><source src="' . $src . '" type="video/' . $ext . '"></video>';
                 break;
 
             default:
-                    $code = '[' . $this->id . '](' . $this->getincludepath() . ')';
+                    $code = '[' . $this->id . '](' . $src . ')';
                 break;
         }
             
diff --git a/app/view/templates/media.php b/app/view/templates/media.php
index 42654db..a8b7157 100644
--- a/app/view/templates/media.php
+++ b/app/view/templates/media.php
@@ -87,7 +87,22 @@ $this->layout('layout', ['title' => 'media', 'stylesheets' => [$css . 'home.css'
         <li title="<?= $media->size('hr') ?> | <?= $media->uid('name') ?> | <?= $media->permissions() ?>">
             <div class="thumbnail">
             <label for="media_<?= $media->id() ?>">
-                <?= $media->type() == 'image' ? '<img src="' . $media->getfullpath() . '">' : $media->getsymbol() ?>
+                <?php
+                switch ($media->type()) {
+                    case 'image':
+                        echo '<img src="' . $media->getfullpath() . '">';
+                        break;
+                    
+                    case 'video':
+                    case 'sound':
+                        echo $media->getcode(true);
+                        break;
+                    
+                    default:
+                        echo $media->getsymbol(true);
+                        break;
+                }
+                ?>
             </label>
             </div>
             
@@ -95,7 +110,7 @@ $this->layout('layout', ['title' => 'media', 'stylesheets' => [$css . 'home.css'
                 <input type="checkbox" name="id[]" value="<?= $media->getfulldir() ?>" form="mediaedit" id="media_<?= $media->id() ?>">
                 <label for="media_<?= $media->id() ?>"><?= $media->id() ?></label>
                 <a href="<?= $media->getfullpath() ?>" target="_blank">⧉</a>
-                <input readonly class="code select-all" value="<?= $media->getcode() ?>" />
+                <input readonly class="code select-all" value="<?= $this->e($media->getcode()) ?>" />
             </div>
                 
         </li>
@@ -153,7 +168,7 @@ $this->layout('layout', ['title' => 'media', 'stylesheets' => [$css . 'home.css'
             <td><?= $media->uid('name') ?></td>
             <td><code><?= $media->permissions() ?></code></td>
             <td><?= $media->surface() ?></td>
-            <td><input readonly class="code select-all" value="<?= $media->getcode() ?>" /></td>
+            <td><input readonly class="code select-all" value="<?= $this->e($media->getcode()) ?>" /></td>
             </tr>
             <?php
         }
diff --git a/assets/css/home.css b/assets/css/home.css
index f3c93eb..c7e04b8 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -488,6 +488,12 @@ main.media table#medialist .thumbnail:hover img {
     height: 150px;
 }
 
+
+#gallery .thumbnail video, #gallery .thumbnail audio {
+    width: 100%;
+    height: 100%;
+}
+
 #gallery li .thumbnail img {max-width: 100%;max-height: 100%;}