1 files changed, 32 insertions, 1 deletions
diff --git a/resources/index.html b/resources/index.html
index 042601d..8fb57d2 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -103,6 +103,21 @@
        pathList.replaceChildren(...pathItems);
      }
 
+     async function loadRecent() {
+       const recentList = document.querySelector('ul#recent-list');
+       const itemTemplate = document.querySelector('#file-item');
+       const recentData = await (await call('get','media/recent')).json();
+
+       const recentItems = recentData.map(f => {
+         return fillTemplate(itemTemplate, {
+           'url': f.is_dir ? `javascript:browseTo(${f.id})` : `javascript:vlcCommand('play/${f.id}')`,
+           'name': f.name,
+           'dirclass': f.is_dir ? 'dir' : 'file',
+         });
+       });
+       recentList.replaceChildren(...recentItems);
+     }
+
      document.addEventListener('readystatechange', (event) => {
        if (document.readyState == 'complete') {
 
@@ -117,6 +132,17 @@
                     { once:true, passive:true },
                   );
 
+         document.querySelector('#recent').
+                  addEventListener(
+                    'toggle',
+                    async (event) => {
+                      if (event.target.open) {
+                        await loadRecent();
+                      }
+                    },
+                    { passive:true },
+                  );
+
          let vlcUpdateIntervalId;
          document.querySelector('#vlc-controls').
                   addEventListener(
@@ -134,7 +160,7 @@
                     { passive:true },
                   );
        }
-     })
+     });
     </script>
     <style>
      body { font-size: 12vw }
@@ -261,6 +287,11 @@
         <ul id="file-list">
         </ul>
       </details>
+      <details id="recent">
+        <summary>recent</summary>
+        <ul id="recent-list">
+        </ul>
+      </details>
     </div>
     <div class="thing">
       <label>Laptop</label>