1import "./lofi.css";
2export interface Input {
3 file: MediaFile;
4 hasCotyledonCookie: boolean;
5}
6export { meta } from "./clofi.marko";
7export { theme } from "../theme.ts";
8
9<const/{ file: dir, hasCotyledonCookie }=input>
10<const/{ path: fullPath, dirname, basename, kind }=dir>
11<const/isRoot=fullPath == "/">
12
13<div#lofi>
14 <define/ListItem|{ value: file }|>
15 <const/dir=file.kind === MediaFileKind.directory>
16 <const/meta=(
17 dir
18 ? string.formatByteSize(file.size)
19 : (file.duration ?? 0) > 0
20 ? formatDuration(file.duration!)
21 : null
22 )>
23 <li class={ dir }>
24 <a href=`/file${escapeUri(file.path)}`>
25 <code>${formatDate(file.date)}</code>${" "}
26 <span>${file.basenameWithoutExt}</span>
27 <if=file.extension><span class="ext">${file.extension}</span></if>
28 <if=dir>/</if>
29 <if=meta><span class="meta">&nbsp;&nbsp;&nbsp;(${meta})</span></if>
30 </a>
31 </li>
32 </define>
33
34 <h1>
35 <if=isRoot>clo's files</if>
36 <else>${fullPath}</else>
37 </h1>
38
39 <if=isRoot>
40 <const/{ readme, sections }=sort.splitRootDirFiles(dir, hasCotyledonCookie)>
41 <if=readme>
42 <ul>
43 <ListItem=readme/>
44 </ul>
45 </if>
46 <for|{ key, files, titleColor }| of=sections>
47 <h2 style={ color: titleColor }>${key}</h2>
48 <ul>
49 <for|item| of=files>
50 <ListItem=item/>
51 </for>
52 </ul>
53 </for>
54 // <if=!hasCotyledonCookie>
55 // <br><br><br><br><br><br>
56 // <p style={ opacity: 0.3 }>
57 // would you like to
58 // <a
59 // href="/file/cotyledon"
60 // style={
61 // color: 'white',
62 // 'text-decoration': 'underline',
63 // }
64 // >dive deeper?</a>
65 // </p>
66 // </>
67 </if>
68 <else>
69 <ul>
70 <li>
71 <a href=`/file${escapeUri(path.posix.dirname(fullPath))}`>
72 [up one...]
73 </a>
74 </li>
75 <for|item| of=dir.getChildren()>
76 ${" "}
77 <ListItem=item/>
78 ${" "}
79 </for>
80 </ul>
81 </else>
82</div>
83
84import * as path from "node:path";
85import {
86 escapeUri,
87 formatDuration,
88 formatDate,
89} from "#src/file-viewer/format.ts";
90import * as string from "@clo/lib/string";
91import { MediaFileKind } from "#src/file-viewer/models/MediaFile.ts";
92import * as sort from "#src/file-viewer/sort.ts";