71 lines
1.9 KiB
Text
71 lines
1.9 KiB
Text
import "./lofi.css";
|
|
export interface Input {
|
|
file: MediaFile;
|
|
hasCotyledonCookie: boolean;
|
|
}
|
|
export { meta, theme } from "./clofi.tsx";
|
|
|
|
<const/{ file: dir, hasCotyledonCookie } = input />
|
|
<const/{ path: fullPath, dirname, basename, kind } = dir />
|
|
<const/isRoot = fullPath == '/'>
|
|
|
|
<div#lofi>
|
|
|
|
<define/ListItem|{ value: file }|>
|
|
<const/dir=file.kind === MediaFileKind.directory/>
|
|
<const/meta=(
|
|
dir
|
|
? formatSize(file.size)
|
|
: (file.duration ?? 0) > 0
|
|
? formatDuration(file.duration!)
|
|
: null
|
|
)/>
|
|
<li class={ dir }>
|
|
<a href=`/file${escapeUri(file.path)}` >
|
|
<code>${formatDate(file.date)}</>${" "}
|
|
${file.basenameWithoutExt}<span class="ext">${file.extension}</>${dir ? '/' : ''}
|
|
<if=meta><span class='meta'>(${meta})</></>
|
|
</a>
|
|
</li>
|
|
</define>
|
|
|
|
<h1>
|
|
<if=isRoot>clo's files</>
|
|
<else>${fullPath}</>
|
|
</h1>
|
|
|
|
<if=isRoot>
|
|
<const/{ readme, sections } = sort.splitRootDirFiles(dir, hasCotyledonCookie) />
|
|
<if=readme><ul><ListItem=readme/></ul></>
|
|
<for|{key, files, titleColor }| of=sections>
|
|
<h2 style={color: titleColor }>${key}</>
|
|
<ul>
|
|
<for|item| of=files><ListItem=item /></>
|
|
</ul>
|
|
</>
|
|
<if=!hasCotyledonCookie>
|
|
<br><br><br><br><br><br>
|
|
<p style={ opacity: 0.3 }>
|
|
would you like to
|
|
<a
|
|
href="/file/cotyledon"
|
|
style={
|
|
color: 'white',
|
|
'text-decoration': 'underline',
|
|
}
|
|
>dive deeper?</a>
|
|
</p>
|
|
</>
|
|
</><else>
|
|
<ul>
|
|
<li><a href=`/file${escapeUri(path.posix.dirname(fullPath))}`>[up one...]</a></li>
|
|
<for|item| of=dir.getChildren()> <ListItem=item /> </>
|
|
</ul>
|
|
</>
|
|
|
|
</div>
|
|
|
|
import * as path from "node:path";
|
|
import { escapeUri, formatDuration, formatSize, formatDate } from "@/file-viewer/format.ts";
|
|
import { MediaFileKind } from "@/file-viewer/models/MediaFile.ts";
|
|
import * as sort from "@/file-viewer/sort.ts";
|