show watched age by colour

1 files changed, 33 insertions, 16 deletions

diff --git a/resources/index.html b/resources/index.html
index 88da34e..ac3ae3b 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -79,6 +79,29 @@
      }
 
      const filesOpenAbort = new AbortController();
+     const ageToClass = [
+       [ 86400, 'ageDay' ],
+       [ 86400*7, 'ageWeek' ],
+       [ 86400*30, 'ageMonth' ],
+       [ 86400*180, 'ageSixMonth' ],
+       [ 86400*365, 'ageYear' ],
+       [ 1e10, 'ageNever' ],
+     ];
+
+     function fillFileTemplates(list) {
+       const itemTemplate = document.querySelector('#file-item');
+
+       return list.map(f => {
+         const age = Math.floor(Date.now()/1000) - f.watched_time;
+         const ageClass = (ageToClass.find(e => e[0] > age) || [0,'ageNever'])[1];
+         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',
+           'ageclass': ageClass,
+         });
+       });
+     }
 
      async function browseTo(id) {
        filesOpenAbort.abort();
@@ -88,13 +111,7 @@
        const itemTemplate = document.querySelector('#file-item');
        const browseData = await (await call('get',`media${ id ? '/' + id : ''}`)).json();
 
-       const fileItems = browseData.children.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',
-         });
-       });
+       const fileItems = fillFileTemplates(browseData.children);
        fileList.replaceChildren(...fileItems);
 
        const parents = browseData.parents ? [{id:null,name:'(root)'},...browseData.parents] : [];
@@ -109,16 +126,9 @@
 
      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',
-         });
-       });
+       const recentItems = fillFileTemplates(recentData)
        recentList.replaceChildren(...recentItems);
      }
 
@@ -252,6 +262,13 @@
        content: '';
      }
 
+     .ageDay { background-color: hsl(180,50%,50%) }
+     .ageWeek { background-color: hsl(180,50%,60%) }
+     .ageMonth { background-color: hsl(180,50%,70%) }
+     .ageSixMonth { background-color: hsl(180,50%,80%) }
+     .ageYear { background-color: hsl(180,50%,90%) }
+     .ageNever { background-color: hsl(180,50%,100%) }
+
      li.dir::marker { content: '📁' }
      li.dir::after { content: '/' }
      li.file::marker { content: '🎞️' }
@@ -405,7 +422,7 @@
     </div>
 
     <template id="file-item">
-      <li slot:class="dirclass"><a slot:href="url"><span><slot>name</slot></span></a></li>
+      <li slot:class="dirclass"><a slot:href="url"><span slot:class="ageclass"><slot>name</slot></span></a></li>
     </template>
   </body>
 </html>