kgva CMS
46aff56577
scrub fill/time were driven off timeupdate, which browsers fire irregularly (a handful of times a second) — visible as the bar stepping instead of gliding. now driven by requestAnimationFrame while playing (display refresh rate), with a direct sync on pause/seeked so it still tracks immediately when not running.\n\npreload=none meant zero data was fetched until the play button was pressed, causing a visible stall right at playback start. preload=metadata lets the browser prime the connection and read the moov atom ahead of time without fetching the full video for visitors who never press play.
73 lines
3.5 KiB
HTML
73 lines
3.5 KiB
HTML
{{ define "bodyclass" }}page-portfolio{{ end }}
|
|
{{ define "main" }}
|
|
{{ $hasText := ne (.RawContent | strings.TrimSpace) "" }}
|
|
{{ $images := .Params.images }}
|
|
{{ $video := .Params.video }}
|
|
|
|
{{ if or $images $video $hasText }}
|
|
<div class="proj-layout">
|
|
{{ if or $images $video }}
|
|
<div class="tui tui--files filebrowser">
|
|
<p class="tui__cmd"><span class="tui__sym">$</span> ls</p>
|
|
{{ $total := 0 }}{{ if $images }}{{ $total = len $images }}{{ end }}{{ if $video }}{{ $total = add $total 1 }}{{ end }}
|
|
<p class="tui__cmd tui__total">total {{ $total }}</p>
|
|
<ul class="tui__ls">
|
|
<li><a href="{{ "/portfolio/" | relLangURL }}" data-name="..">
|
|
<span class="tui__perm">drwxr-xr-x</span><span class="tui__name">..</span>
|
|
</a></li>
|
|
{{ if $video }}
|
|
<li><a data-name="video.mp4" data-video="1" class="is-selected">
|
|
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">video.mp4</span>
|
|
</a></li>
|
|
{{ end }}
|
|
{{ range $i, $im := $images }}
|
|
<li><a data-img="{{ $im.src | relURL }}" data-name="{{ $im.name }}"{{ if and (not $video) (eq $i 0) }} class="is-selected"{{ end }}>
|
|
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">{{ $im.name }}</span>
|
|
</a></li>
|
|
{{ end }}
|
|
</ul>
|
|
|
|
<figure class="tui__preview">
|
|
{{ if $video }}
|
|
<div class="player">
|
|
<video preload="metadata" playsinline{{ with .Params.thumbnail }} poster="{{ . }}"{{ end }}>
|
|
<source src="{{ $video }}" type="video/mp4">
|
|
</video>
|
|
<button class="player__big" type="button" aria-label="play">▶</button>
|
|
<div class="player__bar">
|
|
<button class="player__play" type="button" aria-label="play/pause">▶</button>
|
|
<div class="player__scrub"><div class="player__fill"></div></div>
|
|
<span class="player__time">00:00 / 00:00</span>
|
|
<button class="player__mute" type="button" aria-label="mute">vol</button>
|
|
<button class="player__full" type="button" aria-label="fullscreen">⛶</button>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ if $images }}<img{{ if $video }} hidden{{ end }} src="{{ (index $images 0).src | relURL }}" alt="{{ .Title }}">{{ end }}
|
|
<figcaption class="tui__status">{{ if $video }}video.mp4{{ else if $images }}{{ (index $images 0).name }}{{ end }}</figcaption>
|
|
</figure>
|
|
</div>
|
|
{{ end }}
|
|
{{ if $hasText }}<aside class="proj-info">{{ .Content }}</aside>{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ with .Params.studies }}
|
|
{{ $segs := after 2 (split . "/") }}
|
|
{{ $taxos := slice "schools" "degrees" "semesters" }}
|
|
{{ $last := sub (len $segs) 1 }}
|
|
<p class="proj-path">/studies/{{ range $i, $seg := $segs }}{{ if $i }}/{{ end }}{{ $terms := $.GetTerms (index $taxos $i) }}{{ if $terms }}{{ $t := index $terms 0 }}<a class="proj-path__seg{{ if eq $i $last }} proj-path__seg--last{{ end }}" href="{{ $t.RelPermalink }}">{{ $seg }}</a>{{ else }}{{ $seg }}{{ end }}{{ end }}</p>
|
|
{{ end }}
|
|
|
|
<div class="time"><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006" }} </time></div>
|
|
|
|
{{ $list := sort (where .Site.RegularPages "Section" "portfolio") "Date" "desc" }}
|
|
{{ $idx := -1 }}
|
|
{{ range $i, $p := $list }}{{ if eq $p.RelPermalink $.RelPermalink }}{{ $idx = $i }}{{ end }}{{ end }}
|
|
<nav class="proj-nav" aria-label="Project navigation">
|
|
{{ $older := add $idx 1 }}{{ $newer := sub $idx 1 }}
|
|
{{ if lt $older (len $list) }}<a href="{{ (index $list $older).RelPermalink }}" rel="prev" aria-label="older project">←</a>{{ end }}
|
|
{{ if ge $newer 0 }}<a href="{{ (index $list $newer).RelPermalink }}" rel="next" aria-label="newer project">→</a>{{ end }}
|
|
</nav>
|
|
{{ end }}
|